@nfen/redux-reducer-injector

Redux Reducer Injector

Injects reducers asynchronously as needed

Installation

npm install @nfen/redux-reducer-injector
# or
yarn add @nfen/redux-reducer-injector

Setup

First, update the store with the augmentStore function like so. This will augment the store with injectedReducers and a injectReducers method.

import { createStore, applyMiddleware } from 'redux';
import { setupCreateReducer, augmentStore } from '@nfen/redux-reducer-injector';
import permanentReducers from './reducers';

const createReducer = setupCreateReducer(permanentReducers);
const store = createStore( createReducer(), {} );
augmentStore( createReducer, store );
export default store;

Usage

With the store augmented with our new methods, we can inject reducers directly on our store.

store.injectReducers({
    one: oneReducer,
    two: twoReducer,
    'a.b.c': reducers.nested,
});

React HOC Component

A higher order component is availble and can be used like so. It automatically injects reducers into current store when a component mounts.

import { ReducerInjector } from '@nfen/redux-reducer-injector/components';
import MyComponent from './MyComponent';
import * as reducers from './reducers';

const injector = ReducerInjector({
    reducers: {
      'one': reducers.one,
      'two': reducers.two,
      'a.b.c': reducers.nested,
    }
});

export default injector( MyComponent );

Use HOC with react-saga-injector

By utilizing our sister package, you can dynamically inject reducers and sagas on the fly.

import { compose } from 'redux';
import { SagaInjector } from '@nfen/redux-saga-injector/components';
import { ReducerInjector } from '@nfen/redux-reducer-injector/components';
import MyComponent from './MyComponent';
import * as saga from './sagas';
import * as reducers from './reducers';

const injector = (options) => compose(
    SagaInjector(options),
    ReducerInjector(options),
);

export default injector( MyComponent );