CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Kimkykie
Kimkykie

Reputation: 49

React/Redux - Component not updating despite Redux state change

I am trying to update a map component in my app. I receive the location details from redux and I can see the state change in the Redux Dev Tools or even on my browser console but the map component does not seem to update unless I go to another route then return to the route containing the component.

I have read about Redux needing state to be immutable and I have tried all the suggested options to try to keep my state immutable but I still have not been successful.

Location Reducer

const initialState = {
  gps: [],
};

export default function locationsReducer(state = initialState, action) {
  switch(action.type) {
    
    case FETCH_LOCATIONS:
      return {
        ...state,
        gps: action.locations,
      };

    default:
      return state;
  }
}

MapResults Component

class MapResults extends Component {
  static defaultProps = {
    center: {
      lat: 0.0236,
      lng: 37.9062
    },
    zoom: 6.5
  };
  render() {
    return (
      <div style={{ height: '70vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={ key: process.env.GOOGLE_MAPS_KEY }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
        {this.props.coordinates.gps.map((location, index) => {
          return(
            <Tooltip 
              lat={location.latitude}
              lng={location.longitude}
              title={location.address_name}
              key={index}>
              <Avatar src="/images/gps.svg" />
            </Tooltip>
          )
        })}
        </GoogleMapReact>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return { coordinates: state.locations };
};

export default connect(mapStateToProps)(MapResults);

The fetchLocation method is being triggered correctly and coordinates being fetched and can be viewed in the dev tools. I just have to navigate to a different route then come back to the map route for the markers to be updated on the map.

I expect the map component to update immediately the redux state changes when the location state has been updated.

Any help will be much appreciated. Thanks!

EDIT

My index reducer where I am combining my reducers

Root Reducer

import { combineReducers } from "redux";
import individual from "./individualReducer";
import locations from "./locationsReducer";

export default combineReducers({
  individual,
  locations
});

Redux Dev Tools clearly shows state is updated as you can see in image reduxdevtools screenshot Map after redux state is updated

You can see no markers map immediately redux state is updated Map after I navigate to another route and back to map route

You can see markers are updated Map after I navigate to a different route and back to the map route

Upvotes: 1

Views: 2642

Answers (1)

Nagesh
Nagesh

Reputation: 437

In your Location reducer, the state name is gps, so the state name should be mapped in the component. Because the state gps is updated. Please change the state name as to below

const mapStateToProps = state => {
  return { coordinates: state.gps };
};

Upvotes: 2

Related Questions