React/Redux - 尽管 Redux 状态发生变化，但组件没有更新

Question

我正在尝试更新我的应用程序中的地图组件。 我从 redux 收到位置详细信息，我可以在 Redux 开发工具甚至浏览器控制台中看到状态更改，但地图组件似乎没有更新，除非我转到另一条路线然后返回到包含该组件的路线。

我已经读过 Redux 需要状态不可变，我已经尝试了所有建议的选项来尝试保持我的状态不可变，但我仍然没有成功。

位置减速器

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 组件

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: 'AIzaSyCwvo_lX1mvm9bKQz9YUTacByysl0AEJRg' }}
          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);

fetchLocation 方法被正确触发，坐标被获取，可以在开发工具中查看。 我只需要导航到不同的路线，然后回到地图路线，以便在地图上更新标记。

我希望地图组件在位置状态更新后立即更新 redux 状态更改。

任何帮助都感激不尽。 谢谢！

编辑

我的索引减速器，我将减速器组合在一起

根减速机

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

export default combineReducers({
  individual,
  locations
});

Redux Dev Tools 清楚地显示状态已更新，如您在图像中所见 更新 redux 状态后的映射

你看不到任何标记 导航到另一条路线并返回地图路线后的地图

您可以看到标记已更新

Answer 1

在您的Location reducer中，状态名称为gps ，因此状态名称应映射在组件中。 因为状态gps已更新。 请在下面更改州名

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

Answer 2

抱歉，您的 google map api 密钥已公开。 请小心您的 api 密钥，请使用 env 变量。