Provides a way for multiple react-redux apps to share the same state tree, adhering to the principle of Single Source Of Truth, without requiring changes to the apps. It enables you to use sub-apps inside your redux app, without using multiple stores, and without requiring that you write your sub-apps in a particular manner. Inspired by cyclejs/isolate.
The package exposes an isolate function that isolates a Redux container, giving it it's own pseudo-store. The sub-app state tree is manually mounted in the root state tree, and information about how the sub-tree is handled is passed into the isolate function.
npm install --save react-redux-isolate
The package depends on React, Redux and React-Redux.
To isolate a redux subapp, we need to isolate the redux container:
import { isolate } from 'react-redux-isolate';
const isolateCounterState = (state, { id }) => state.counters[id] || 0;
const PREFIX_COUNTER_ACTION = 'counter / ';
const isolateCounterAction = (action, { id }) => ({
type: PREFIX_COUNTER_ACTION + action.type,
counterId: id,
counterAction: action
});
const IsolatedCounterApp = isolate(isolateCounterState, isolateCounterAction)(CounterApp);We also need to mount the state tree accordingly:
const countersReducer = (state = {}, action) => {
if(action.type.startsWith(PREFIX_COUNTER_ACTION)) {
return {
...state,
[action.counterId]: counterRootReducer(state[action.counterId], action.counterAction)
};
}
return state;
};
const rootReducer = combineReducers({
counters: countersReducer
});For a full example, se examples/counters. Try checking out this repository and running npm run develop inside the counters example to play around.
MIT