topic Re: Problem Implementing MutableStoreManager in ArcGIS Experience Builder Questions

Problem Implementing MutableStoreManager

ChrisCarter3 — Thu, 18 Apr 2024 21:31:56 GMT

Hoping someone can help me figure out what I'm doing wrong. I've been struggling to figure this out all week.

I'm trying to pass complex objects (in this case an Extent) between widgets.

In the sender widget, I'm using this:

MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext);

And the receiving widget has this in the mapExtraStateProps function:

const newSearchExtent = props?.mutableStateProps?.searchExtent;

But it always comes back as undefined.

Has anyone successfully passed complex JavaScript objects between widgets?

Re: Problem Implementing MutableStoreManager

JeffreyThompson2 — Fri, 19 Apr 2024 12:43:27 GMT

Your syntax looks ok. The ? after props is unnecessary, but I don't think it will make a difference.

//Will not error const newSearchExtent = props.mutableStateProps?.searchExtent;

I assume id in MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext); is passing a string value like 'widget_7' where 7 is the correct id number of the receiving widget.

Confirm that ext in the sending widget is correctly defined.

I suspect the problem is that the message is being sent multiple times because of re-renders and you are only catching an undefined instance. What happens if you try to read your message in a useEffect() function?

useEffect(() => { console.log(props.mutableStateProps?.searchExtent) }, [props.mutableStateProps?.searchExtent])

Re: Problem Implementing MutableStoreManager

TimWestern — Fri, 19 Apr 2024 14:20:07 GMT

@ChrisCarter3 wrote:
Hoping someone can help me figure out what I'm doing wrong. I've been struggling to figure this out all week.
I'm trying to pass complex objects (in this case an Extent) between widgets.
In the sender widget, I'm using this:
MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext);

And the receiving widget has this in the mapExtraStateProps function:
const newSearchExtent = props?.mutableStateProps?.searchExtent;

But it always comes back as undefined.

Has anyone successfully passed complex JavaScript objects between widgets?

passed complex JavaScript objects between widgets

This is a question i find my self asking periodically, because when you build a tsx file and then use it in another you are technically passing data between them. The two caveats you have to watch out for are the following:

Props are defined from the highest component on down. If you update something inside a widget, but don't use a callback or event handler that is defined on the parent and passed into the child the parent props may not know about it. Otherwise it is possible the parent might not be aware.

Below is a very generic example of what this may look like.

// ParentComponent.js import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [data, setData] = useState('initial data'); const handleDataChange = (newData) => { setData(newData); }; return ( <div> <ChildComponent data={data} onDataChange={handleDataChange} /> </div> ); } export default ParentComponent;

// ChildComponent.js import React from 'react'; function ChildComponent({ data, onDataChange }) { const handleClick = () => { // Modify the data const newData = 'modified data'; // Call the callback function to pass the modified data to the parent onDataChange(newData); }; return ( <div> <button onClick={handleClick}>Modify Data</button> </div> ); } export default ChildComponent;

State does not necessarily have a guarantee on when it is correct. I find I often have to add a check to see if something is loaded, before other processes can handle and render output. In functional components you may need a useEffect to manage when these update too.

Re: Problem Implementing MutableStoreManager

ChrisCarter3 — Tue, 23 Apr 2024 20:29:25 GMT

Thank you, this helped me figure out that I was passing the id of the sending widget, not the receiving widget. Once I fixed that, it worked. For whatever reason, passing simple objects via widgetStatePropChange doesn't seem to care about which widget ID you use.