Usage : Registering Store and Global Actions

Each Micro Frontend would have the capability to maintain it's own Redux Store. Once a Redux Store has been created, the app will need to register that store with the Global Store. Each Micro Frontend will need to provide an unique name when registering the store. (Note: Incase 2 Micro Frontends have the same name then this would cause an unwanted clash. This is something that needs to be maintained via mutual trust and co-ordination among the various teams and generally depends on the team organization and structure).

Registering Stores

Apps have 2 options, either pass the Reducer and ana array of middlewares to the GlobalStore and let it create the Store, or create the Redux store and pass the store to the GlobalStore.

CreateStore

this.globalStore = GlobalStore.Get();
this.store = this.globalStore.CreateStore("CounterApp", CounterReducer, []);

In this code snipped 'CounterApp' is the name of the Micro Frontend and CounterReducer is a pure Reducer. The third empty parameter represents the middlewares needed by the store (in this case no middlewares are required).

RegisterStore

this.globalStore = GlobalStore.Get();
this.globalStore = GlobalStore.Get();
this.store = createStore(TodoReducer);
this.globalStore.RegisterStore("TodoApp", this.store);

In this code snipped 'TodoApp' is the name of the Micro Frontend and TodoReducer is a pure Reducer.

Global Actions

Global actions is one of the way to enable cross-application communication. Global action would mean that a Micro Frontend would allow other apps to dispatch these global actions in its store. So if a Micro Frontend registers an action as a "Global Action" and another app dispatches this action, the GlobalStore will dispatch the action and the payload in the store of the current App. For registering a global action the name/type of the actions which needs to be global must be passed by the Micro Frontend.

There are 2 ways of registering Global Actions, either pass an array of action types when registering/creating the store or call the method RegisterGlobalActions on GlobalStore.

this.globalStore = GlobalStore.Get(false);
this.store = this.globalStore.CreateStore("CounterApp", CounterReducer, []);
this.globalStore.RegisterGlobalActions("CounterApp", ["INCREMENT_GLOBAL", "DECREMENT_GLOBAL"]);

In this code snippet the CounterApp registers 2 global actions with type 'INCREMENT_GLOBAL' and 'DECREMENT_GLOBAL'.

this.globalStore = GlobalStore.Get(false);
this.store = this.globalStore.CreateStore("CounterApp", CounterReducer, [], ["INCREMENT_GLOBAL", "DECREMENT_GLOBAL"]);

This code snippet essentially have the same result as the previous one but the extra RegisterGlobalActions method is not called.

Micro Frontends also have the capability to register all actions as Global. This would mean that the GlobalStore would dispatch all actions to this store. Although its not recommended but if you are creating some kind of a common utility app, probably you can try this.

this.globalStore = GlobalStore.Get();
this.store = createStore(TodoReducer);
this.globalStore.RegisterStore("TodoApp", this.store, [GlobalStore.AllowAll]);