ptzagk / redux-injectors

Asynchronous injectors for Redux reducers and sagas. As used by react-boilerplate.

Dynamically load redux reducers and redux-saga sagas as needed, instead of loading them all upfront. This has some nice benefits, such as avoiding having to manage a big global list of reducers and sagas. It also allows more effective use of code-splitting. See motivation. As used by react-boilerplate.

Getting Started

npm install redux-injectors # (or yarn add redux-injectors)

Setting up the redux store

The redux store needs to be configured to allow this library to work. The library exports a store enhancer that can be passed to the createStore function.

import { createStore } from "redux";
import { createInjectorsEnhancer } from "redux-injectors";

const store = createStore(
 createReducer(),
 initialState,
 createInjectorsEnhancer({
   createReducer,
   runSaga,
 })
)

Note the createInjectorsEnhancer function takes two options. createReducer should be a function that when called will return the root reducer. It's passed the injected reducers as an object of key-reducer pairs.

function createReducer(injectedReducers = {}) {
 const rootReducer = combineReducers({
   ...injectedReducers,
   // other non-injected reducers can go here...
 });

 return rootReducer
}

runSaga should usually be sagaMiddleware.run.

  const runSaga = sagaMiddleware.run;

Injecting your first reducer and saga

After setting up the store, you will be able to start injecting reducers and sagas.

import { compose } from "redux";
import { injectReducer, injectSaga } from "redux-injectors";

class BooksManager extends React.PureComponent {
 render() {
   return null;
 }
}

export default compose(
  injectReducer({ key: "books", reducer: booksReducer }),
  injectSaga({ key: "books", saga: booksSaga })
)(BooksManager);

Or, using hooks:

import { useInjectReducer, useInjectSaga } from "redux-injectors";

export default function BooksManager() {
  useInjectReducer({ key: "books", reducer: booksReducer });
  useInjectSaga({ key: "books", saga: booksSaga });

  return null;
}

Documentation

See the API reference

Motivation

There's a few reasons why you might not want to load all your reducers and sagas upfront:

1. You don't need all the reducers and sagas for every page. This library lets you only load the reducers/sagas that are needed for the page being viewed. This speeds up the page load time because you can take advantage of code-splitting. This is also good for performance after the page has loaded, because fewer reducers and sagas are running.
2. You don't want to have to manage a big list of reducers/sagas. This library lets components inject their own reducers/sagas, so you don't need to worry about adding reducers/sagas to a global list.