TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    alt text

    build status

    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(

    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({
       // other non-injected reducers can go here...
     return rootReducer

    runSaga should usually be

      const runSaga =;

    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 })

    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;


    See the API reference


    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.




    npm i redux-injectors

    DownloadsWeekly Downloads






    Unpacked Size

    44.8 kB

    Total Files


    Last publish


    • julienben
    • benlorantfy