Reactjs 如何将Mapbox GL与React和Redux一起使用？

我正在使用React和Redux构建我的应用程序。现在，我想在其中一个组件中嵌入Mapbox GL映射，并在我的Redux中创建一些状态以反映映射的状态

---

将我的React-Redux应用程序与Mapbox GL结合起来，使我的React元素能够与地图交互的最佳方式是什么？

我首先考虑React和Redux的不同职责（因为它们是非常不同的工具）

反应：构建和呈现UI/组件 React用于帮助在web上渲染组件。你可以用它构建非常棒、复杂的UI

然而，大多数映射库（Mapbox、传单）本质上非常复杂。它们可以很好地处理自己的渲染周期

目前流行的做法是将映射库包装在react组件中，以便可以在项目的react层次结构中使用它，但将映射中的渲染委托给映射库

包装器可以像渲染

一样简单，您可以在地图引用本身上使用地图库的函数，并可以通过生命周期方法（如

shouldComponentUpdate

）控制react组件更新

Redux：使状态管理可预测 通常认为

state===data

是一个安全的选择，组件中的大部分复杂性都是数据（比如地图中的图像分幅）。然而，要使redux理论发挥作用，状态需要表示为普通对象和可序列化，而大多数地图库都不是这样

以前有一些不错的研究，只针对你问题中的重复部分

thump的一般规则是在redux状态树中保留所需的数据，以将映射返回到其当前状态。示例包括缩放级别、图层、位置等，但不包括地图/矢量/svg数据本身

通过这种方式，您可以分派操作，这些操作表示您希望在应用程序数据中进行的更改，从而调用地图库的本机渲染

思考：

 state = { 
    mapZoom: { boundaries: [lat, lng], zoomLevel: 5},
    pokeStops: {...layers },
  }; 

然后在按钮上调度一个操作，将状态减少为新的mapZoom对象。这个新状态触发本机映射库，该映射库封装在react组件中，类似于

map.zoomTo（this.props.mapZoom）