reactjs - 如何将 Mapbox GL 与 React 和 Redux 结合使用？

Question

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

将我的 React Redux 应用程序与 Mapbox GL 相结合的最佳方式是什么，以便我的 React 元素可以与 map 交互？

Answer 1

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

React:构建和渲染 UI/组件

React 旨在帮助在网络上渲染组件。您可以用它构建非常出色、复杂的 UI 片段。

但是，大多数 map 库(Mapbox、Leaflet)本质上都非常复杂。他们很好地处理自己的渲染周期。

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

包装器可以像渲染 <div ref="mbMap" /> 一样简单。 ，您将能够在 map 引用本身上使用 map 库的功能，并可以通过生命周期方法(如 shouldComponentUpdate )控制 react 组件更新。 .

Redux:使状态管理可预测

通常认为state === data是一个安全的选择。组件中的大部分复杂性都是数据(例如 map 中的图像图 block )。然而，为了使 redux 理论发挥作用，状态需要表示为普通对象并且可序列化，而大多数 map 库都不是。

关于你的问题的 redux 部分，有一些不错的前研究 (see this conversation) .

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

这样您就可以调度操作，这些操作代表您想要对应用程序数据进行的更改，进而调用 map 库的 native 渲染。

思考:

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

然后您在按钮上分派(dispatch)一个操作，将状态简化为新的 mapZoom 对象。这个新状态会触发 native 映射库，将其包装在 React 组件中，类似于 map.zoomTo(this.props.mapZoom) .