我正在使用React和Redux来构建我的应用程序。现在我想在其中一个组件中嵌入一个Mapbox GL映射，并在我的Redux中创建一些状态以反映地图的状态。
将React Redux应用与Mapbox GL结合使用的最佳方法是什么，以便我的React元素可以与地图互动？
答案 0 :(得分：2)
我首先考虑React和Redux的不同职责（因为它们是非常不同的工具）。
React旨在帮助在Web上呈现组件。您可以使用它构建非常棒的复杂UI。
但是，大多数映射库（Mapbox，Leaflet）本质上都非常复杂。他们很好地处理了自己的渲染周期。
现在的主流做法是将映射库包装在react组件中，以便您可以在项目的react层次结构中使用它，但是可以将map中的呈现委托给映射库。
包装器可以像呈现<div ref="mbMap" />的东西一样简单，并且您将能够在地图引用本身上使用地图库的功能，并且可以通过生命周期方法控制反应组件更新，例如{ {1}}。
考虑shouldComponentUpdate通常是一个安全的选择，并且组件中的大多数复杂性都是数据（例如，想想地图中的图像切片）。但是，对于redux工作原理，state需要表示为普通对象和可序列化，大多数地图库都不是。
对于你的问题(see this conversation)的还原片，有一些不错的前研究。
重击的一般规则是保存所需的数据，以便在redux状态树中将地图返回到当前状态。示例可以是缩放级别，图层，位置等，但不是map / vector / svg数据本身。
通过这种方式，您可以调度操作，这些操作代表您要制作的应用数据的更改，然后调用地图库的本机呈现。
想想：
state === data并在按钮上调度操作，该按钮将状态减少为新的mapZoom对象。该新状态触发本机映射库，将react组件包含在 state = {
mapZoom: { boundaries: [lat, lng], zoomLevel: 5},
pokeStops: {...layers },
};
。