React / Redux商店(包装器映射箱)中的可变对象?

时间:2018-05-16 13:33:40

标签: reactjs redux react-redux leaflet mapbox-gl

是否可以在商店redux中存储可变对象?

我试图在我的应用中的地图框的外部库上创建一个包装器。我使用库创建一个地图对象:

组件 - 地图

import * as MapboxGl from 'mapbox-gl'
.......
componentDidMount() {
  this.mapObject = new MapboxGl.Map({
      container: this.MapContainer
      style: 'mapbox://styles/mapbox/light-v9',
   })
}
.......

接下来,我需要将mapObject传递给子组件。 组件结构:

<App>
........
  <Map>
    <Source>
      <Layer />
      <Layer />
    </Source>
  </Map>
.......
</App>  
  1. 如何将mapObject传输到子组件(Source / Laer)(我可以将此对象保存到redux存储或使用反应 上下文并在store redux中保存mapObject的数据?
  2. 您是否可以共享一个完整项目(giths)的链接以便工作 同     上述情况实施的地图?

1 个答案:

答案 0 :(得分:1)

在你提交的Redux问题中已经回答了这个问题,但我会在这里回答它的可见性:

我会说这是一个视图层问题,因此不应该在Redux商店中保留几个级别。

在我们自己的应用程序中,我们使用的是Cesium 3D globe库,还需要传递对地图相关对象的引用,如Cesium的Scene类。在我们的应用程序中,我们通过将值作为props传递显式,但React 16.3中提供的新React Context API也是一个不错的选择。

您可能需要阅读rendering a Cesium 3D globe using React上的帖子,其中展示了这种方法。