Using Calcite Components and ArcGIS Maps SDK for JavaScript with React and redux

[MichelleStuart]

We are building a complex web application and love the component aspect of React to keep chunks of code manageable.  We use redux to prevent prop-drilling and currently the view is in the state.  At the DevSummit, I was told I should remove the view from the state because the view maintains its own state, and this makes sense, but I can't figure out how to have the view available to the various components throughout the app without prop drilling. For example if I create the view in the top level, and there is a Calcite Shell child, I have to pass the view down to the Shell, then inside the Shell is a Calcite Panel holding the basemap gallery, and the Basemap gallery requires a view, so I have to pass the view down the line to that component.

Are those my only 2 choices?  To prop-drill or to hold the view in redux state?

[JamesIng]

Hi @MichelleStuart 
When your saying 'View' are you referring to the mapView / webView or an actual React component that's rendering as a view?

We've built a large web application in React using redux, and we store a reference to the mapView / webView in redux after we instantiate it and call on that if we need to use any operations from it.

e.g: Image we have a completely different React component that renders that has a button or such that needs to move the map.

moveMap = (target => { // A function inside a react component that's triggered by a button's onClick event

const { mapView } = this.props // reference we've injected into this functional component from redux.

mapView.goto(target)
}

 
Is there any further information you can provide to clarify the issue?