Handling Redux State Across Multiple Widget Instances

[vibsid0986]

Hello Team,

I’ve developed a custom widget by extending a React widget, and this widget is responsible for rendering an external React application as a React component. For state management, the external React application utilizes Redux to store the model state. I am initializing this store within the widget, and the React application is wrapped around this store.

Below is a code snippet for reference:

@injectable()
export class CustomWidget extends ReactWidget implements NavigatableWidget {
   @inject(CustomWidgetOptions) protected override options: CustomWidgetOptions;
   protected store: Store;

   @postConstruct()
   init(): void {
      super.init();
      this.store = configureStore({
        reducer: {
          config: configReducer,
          currentApp: appReducer,
          resource: resourceReducer,
  };
   }
          ....
   render(): React.ReactNode {
      return <ComponentView />
   }
}
         ....
export function ComponentView(props: ApplicationProps): React.ReactElement {
   return (
      <Provider store={props.store}>
         <Application {...props} />
      </Provider>
   );
}

However, when managing multiple instances of the custom widget (such as in multiple tabs), the Redux store only retains the state of the currently active widget.

Could you kindly guide me on how to configure the Redux store so that it manages and retains the state for all open instances of the widget, across all tabs?

Thank you in advance for your assistance.

Best regards,
Siddhant

[sdirix]

Hi @vibsid0986,

Looking at the posted code, it seems like you create a separate store for each instance of the widget. The store is a field on the widget and is initialized in @postConstruct, so you will have a separate store for each widget instance.

Could you kindly guide me on how to configure the Redux store so that it manages and retains the state for all open instances of the widget, across all tabs?

In that case you need to make sure that you have a single store for all widgets, i.e. you need to retrieve or hand in the store to each widget instead of creating a new one per widget.

For example the store could be managed within your CustomWidgetOptions or retrieved from some service which you inject in your widgets.