React/Redux 存储（包装器映射框）中的可变对象？答案

【问题标题】：Mutable object inside a React/Redux store ( wrapper mapbox)?React/Redux 存储（包装器映射框）中的可变对象？
【发布时间】：2018-10-26 14:18:35
【问题描述】：

是否可以在 store 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>

如何将 mapObject 传输到子组件（Source / Laer) （我可以将此对象保存到 redux 商店还是使用 react 上下文并将mapObject的数据保存在商店redux中）？
你能分享一个完整的项目（giths）的链接吗？和实现上述情况的地图？

【问题讨论】：

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

【解决方案1】：

已经在您提交的 Redux 问题中回答了这个问题，但我也会在这里回答以提高知名度：

我会说这是一个视图层问题，因此不应将其保留在 Redux 存储中的几个级别。

在我们自己的应用程序中，我们正在使用 Cesium 3D 地球库，并且还需要传递对地图相关对象的引用，例如 Cesium 的 Scene 类。在我们的应用程序中，我们通过将值作为 props 来明确地做到这一点，但是 React 16.3 中可用的新 React Context API 也是一个不错的选择。

您可能想通读我在 rendering a Cesium 3D globe using React 上的帖子，这些帖子演示了这种方法。

【讨论】：