redux-contexts

redux-contexts is a utility for adding redux reducers with separated states during runtime. The library is forked from redux-injector by @randallknutsson and is built upon on multireducer by @erikras

Installation

npm install --save redux-contexts

Why?

This is a set of functions and higher order components (decorators) that lets you reuse your components and reducers in an isolated way. When you find yourself wanting to have multiple instances of the same component and reducer, but with separated states and actions dispatches - this is what you need!

Usage

Start by creating the redux store with the createInjectStore redux middleware

import { createInjectStore } from 'redux-contexts';

let store = createInjectStore(
  reducersObject,
  initialState
);

Then wrap the components that you want to isolate with ContextStoreProvider

import React from 'react';
import { ContextStoreProvider } from 'redux-contexts';
import OtherComponent from 'OtherComponent';
import anyReducer from 'anyReducer';

export default class AnyComponent extends React.Component {
  render() {
    return (
      <ContextStoreProvider reducers={ { anyReducer } }>
        <OtherComponent />
      </ContextStoreProvider>
    );
  }
}

Finally connect the component with contextConnect in the same way as react-redux connect

import React from 'react';
import { contextConnect } from 'redux-contexts';
import someAction from 'someAction';

const mapStateToProps = state => ({
  someValue: state.anyReducer.someValue
});

const mapDispatchToProps = dispatch => ({
  someAction: () => dispatch(someAction())
});

@contextConnect(mapStateToProps, mapDispatchToProps);
export default class OtherComponent extends React.Component {
}