topic Re: Using Calcite Components and ArcGIS Maps SDK for JavaScript with React and redux in ArcGIS JavaScript Maps SDK Questions

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

MichelleStuart — Wed, 03 May 2023 16:24:10 GMT

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?

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

JamesIng — Mon, 08 May 2023 03:03:24 GMT

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?