How can we access the store extension created in a widget from another widget?

245
5
03-25-2025 08:55 AM
Vara_PrasadM_S
Frequent Contributor

Hi ,

I have followed the link - Create Redux store under Widget Communication section of Sample Code. Created a store extension in a custom widget (Widget1) and tried to access the store in another custom widget (Widget2). But I could not access it through 'useSelector'. My requirement is to access the store in a custom module(.tsx) instantiated in a widget (Widget1) which extends the store and also in its widget.tsx file. 

My folder structure

your-extensions/
├── widgets/
│   ├── widget1/
│   │   └── store-extensions/
│   │   |   └── store-extension.js
| | └── src/runtime/widget.tsx & customModule.tsx
| | └── manifest.json │ ├── widget2/
| | └── src/runtime/widget.tsx & customModule.tsx │ │ └── manifest.json

I also tried keeping the store in a common place and extending it in both widget's manifest files

your-extensions/
├── widgets/
│   ├── shared/
│   │   └── store-extensions/
│   │       └── plan-store.js
│   ├── widget1/
│   │   └── manifest.json
│   ├── widget2/
│   │   └── manifest.json

 However, I could not successfully specific the uri for extension in manifest.json from shared folder it is not accepting it.

Any pointers on how to use the custom store extension in multiple widgets and its components.

Hi @JeffreyThompson2. Could you please guide me in this.

Thanks in advance.

0 Kudos
5 Replies
JeffreyThompson2
MVP Frequent Contributor

I'm not sure there is an actual use case for directly interacting with Redux, especially if you are creating an interaction between two custom widgets. You can just send and receive Messages. Take a look at the last section in this post.

https://community.esri.com/t5/experience-builder-tips-and-tricks/react-for-experience-builder-develo...

GIS Developer
City of Arlington, Texas
Vara_PrasadM_S
Frequent Contributor

Hi @JeffreyThompson2 , thank you for your reply. My requirement is not direct communication.  Widget1 stores some data in its flow and widget 2 need to use that data later in its specific flow.  Could you please suggest, how can I achieve this if custom reduced store is not suitable.

Thanks in advance 

0 Kudos
PartyPelican
Occasional Contributor

I'm not sure of the exact reason your widget isn't working without looking at the code, but I did manage to get changes in and out of the redux store. You can take a look at the select-features widget and the change-select-method widget in my GitHub repo.

 

https://github.com/Party-Pelican/exb-custom-widgets/tree/main/widgets

Vara_PrasadM_S
Frequent Contributor

Thank you @JeffreyThompson2 and @PartyPelican for your response. It is working fine. 

0 Kudos
TimWestern
MVP

So one thing that occurred to me the last time I worked with Redux and Custom Widgets, and custom actions, was that the id of widgets get's assigned at runtime, and is not guessable most of the time.  The tradeoff I found was you could create a file that was visible by the two widgets, that had the widget IDs specified in them, and EXB could then use that to be consistent in naming, so that it could call things on the other widget using that.  I'm struggling to remember the exact process I used, but I'm fairly certain that you can import from a peer widget  a file, and use that for that naming on the store.   Otherwise I'm not even sure the store for a given widget would have a predictable name.

0 Kudos