State Managment in Exp Builder

Baral_lec

Hi there,

in a Custom Widget, I want to use the reduxStore to hold some features, such that I can access them in every component without having to prop drill. With simple values like strings, this works marvelous. How ever if I try it with an esri.Graphic Object, i get an immutable object back, which has different properties. What is the correct way to store such values in the redux store?  Thanks

useEffect(() => {
if (!appStore.getState().widgetsState?.[id]?.steps) {
     appStore.dispatch(appActions.widgetStatePropChange(id, 'steps', Search));}}, [id]);
//and retrieving:
const steps = appStore.getState().widgetsState?.[id]?.steps;
//this works as expected.

//However
queryFeatureLayer(query).then((feat: Graphic) => {
appStore.dispatch(appActions.widgetStatePropChange(widgetId, '_lineFeature', feat));
}
appStore.getState().widgetsState["widget_3"]._lineFeature yiels

Object { … }
__immutable_invariants_hold: true
asMutable: function B(e)​
getIn: function F(e, t)​
merge: function A(e, t)​
replace: function P(e, t)​
set: function N(e, t, r)​
setIn: function L(e, t, r)​
update: function M(e, t)​
updateIn: function U(e, t)​
without: function E(e)
<prototype>: Object { … }
// which has no similaritys to  a __esri.Graphic Object

 

 

JeffreyThompson2

The dispatch() function can only send simple objects. To handle complex objects you will need to use the MutableStoreManager.

//To send a message, with a widget id of 'widget_id', use:

//Dispatch- This should be your preferred method, as it is immutiable.
getAppStore().dispatch(appActions.widgetStatePropChange('widget_id','nameOfMessage', message))

//MutableStoreManager- Use this only if you need to send a complex object.
MutableStoreManager.getInstance().updateStateValue('widget_id', 'nameOfMessage', message)

//To read a message

//From Dispatch:
props.stateProps?.nameOfmessage

//From MutableStoreManager:
props.mutableStateProps?.nameOfmessage