Package Exports

react-redux-isolate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-isolate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Redux Isolate

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.

Intuition

state-tree-diagram

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.

Installation

npm install --save react-redux-isolate

The package depends on React, Redux and React-Redux.

Usage

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.

License

MIT