search

microsoft / redux-micro-frontend

This is a library for using Redux to manage state for self-contained apps in a Micro-Frontend architecture. Each self-contained isolated app can have its own isolated and decoupled Redux store. The componentized stores interact with a global store for enabling cross-application communication.
MIT License
344 stars 64 forks source link

How to get the global state change in one of the other app? #46

Open nithincs20 opened 1 year ago

nithincs20 commented 1 year ago

Describe the bug

(Not a Bug, it is a Question) I have two apps built using redux and redux-micro-frontend, In this case how could I get the global state change happening in one place, to one of the other App?

Here is my code in the Main App component to subscribe the CounterApp

const globalStore = GlobalStore.Get(false);
const globalStateChanged = (stateChanged) => {
        const stateC = globalState.CounterApp;
        console.log({ stateChanged, stateC });
};
globalStore.SubscribeToGlobalState('CounterApp', globalStateChanged);

And in the other App(Counter app), a method is triggered by the button click. Below is the code for that. (we have the same reducer and actions file that is created from the samples projects under the library)

const incrementGlobal = () => {
    globalStore.DispatchAction("CounterApp", IncrementGlobalCounter());
};

But I don't see the globalStateChanged invocation and the console print in Main App method. What will be the issue here? Are we missing anything here, and if you could share the code for the right approach it would be great.