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

Question

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

将我的React Redux应用程序与Mapbox GL相结合的最佳方式是什么，这样我的Reack元素就可以与地图交互？

Answer 1

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

React：建筑；渲染UI/组件

React的构建是为了帮助在web上渲染组件。你可以用它构建非常棒的、复杂的UI

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

目前流行的做法是将映射库封装在react组件中，这样您就可以在项目的react层次结构中使用它，但将映射中的渲染委派给映射库。

包装器可以是像渲染<div ref="mbMap" /> 一样简单的东西，并且您将能够在映射引用本身上使用映射库的函数，并且可以通过像shouldComponentUpdate这样的生命周期方法来控制react组件更新。

Redux：使状态管理可预测

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

之前有一些不错的研究，只是针对你问题的重复部分（见本次对话）。

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

通过这种方式，您可以调度操作，这些操作表示您想要对应用程序数据进行的更改，进而调用地图库的本地呈现。

思考：

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

然后在按钮上分派一个操作，该操作将状态简化为一个新的mapZoom对象。这个新状态激发了本机映射库，该库被封装在对类似map.zoomTo(this.props.mapZoom)的东西的react组件中。