Mutable object inside a React/Redux store ( wrapper mapbox)?

Question

Is it possible to store a mutable object in the store redux?

I'm trying to create a wrapper over the external library of the mapbox in my app. I create a map object using the library:

Component - Map

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

Next, I need to pass the mapObject to the child components. Structure of components:

<App>
........
  <Map>
    <Source>
      <Layer />
      <Layer />
    </Source>
  </Map>
.......
</App>  

1. How can I transfer an mapObject to the child components (Source / Laer) (can I save this object to the redux store or use the react context and save the data for the mapObject in the store redux)?
2. Can you share a link to a full-fledged project (giths) for working with maps where the above situation is implemented?

Answer 1

Already answered this in the Redux issue you filed, but I'll answer it here for visibility as well:

I would say that's a view-layer concern, so that shouldn't be kept in the Redux store on a few levels.

In our own app, we are using the Cesium 3D globe library, and also need to pass down references to map-related objects like Cesium's Scene class. In our app, we do that explicitly by passing the values as props, but the new React Context API that's available in React 16.3 would be a good choice as well.

You might want to read through my posts on rendering a Cesium 3D globe using React, which demonstrate this approach.