Quick Start

Installation

npm install redux-micro-frontend --save

Quick Guide

Get an instance of Global Store

import { GlobalStore } from 'redux-micro-frontend';
...
this.globalStore = GlobalStore.Get();

Create/Register Store

ler appStore = createStore(AppReducer); // Redux Store
this.globalStore.RegisterStore("App1", appStore);
this.globalStore.RegisterGlobalActions("App1", ["Action-1", "Action-2"]); // These actions can be dispatched by other apps to this store

Dispatch Action

let action = {
    type: 'Action-1',
    payload: 'Some data'
}
this.globalStore.DispatchAction("App1", action); // This will dispatch the action to current app's store as well other stores who might have registered 'Action-1' as a global action

Subscribe to State

// State change in any of the apps
this.globalStore.Subscribe("App1", localStateChanged);

// State change in the current app
this.globalStore.SubscribeToGlobalState("App1", globalStateChanged);

// State change in app2's state
this.globalStore.SubscribeToPartnerState("App1", "App2", app2StateChanged);

...

localStateChanged(localState) {
    // Do something with the new state
}

globalStateChanged(stateChanged) {
        // The global state has a separate attribute for all the apps registered in the store
        let app1State = globalState.App1;
        let app2State = globalState.App2; 
}

app2StateChanged(app2State) {
    // Do something with the new state of app 2
}

Sample App

Location: https://github.com/microsoft/redux-micro-frontend/tree/main/sample