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.

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

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;

If you're using redux devtools, it's important to set shouldHotReload to false. This is because otherwise, redux devtools will re-dispatch previous actions when reducers are injected, causing unexpected behavior.

If using redux-toolkit:

 const store = configureStore({ devTools: { shouldHotReload: false } })

If not using redux-toolkit:

import { composeWithDevTools } from 'redux-devtools-extension'; const composeEnhancers = composeWithDevTools({ shouldHotReload: false }); const store = createStore(reducer, composeEnhancers( ... ));

Unfortunately this causes a separate issue where the action history is cleared when a reducer is injected, but it's still strongly recommended to set shouldHotReload to false. There's an open issue in the redux-devtools repo about this.

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

Note: while the above usage should work in most cases, you might find your reducers/sagas aren't being injected in time to receive an action. This can happen, for example, if you dispatch an action inside a useLayoutEffect instead of a useEffect. In that case, useInjectReducer and useInjectSaga return boolean flags that are true once the reducers/sagas have finished injecting. You can check these before rendering children that depend on these reducers/sagas being injected.

import { useInjectReducer, useInjectSaga } from "redux-injectors"; export default function BooksManager(props) { const reducerInjected = useInjectReducer({ key: "books", reducer: booksReducer }); const sagaInjected = useInjectSaga({ key: "books", saga: booksSaga }); if (!reducerInjected || !sagaInjected) { return null; } return ( <> {props.children} </> ); }

See the API reference
Or the example

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.