How to dynamically load reducers for code splitting in a Redux application?

Question

I'm going migrate to Redux.

My application consists of a lot of parts (pages, components) so I want to create many reducers. Redux examples show that I should use combineReducers() to generate one reducer.

Also as I understand Redux application should have one store and it is created once the application starts. When the store is being created I should pass my combined reducer. This makes sense if the application is not too big.

But what if I build more than one JavaScript bundle? For example, each page of application has own bundle. I think in this case the one combined reducer is not good. I looked through the sources of Redux and I have found replaceReducer() function. It seems to be what I want.

I could create combined reducer for each part my application and use replaceReducer() when I move between parts of application.

Is this a good approach?

Answer 1

Update: see also how Twitter does it.

This is not a full answer but should help you get started. Note that I'm not throwing away old reducers—I'm just adding new ones to the combination list. I see no reason to throw away the old reducers—even in the largest app you're unlikely to have thousands of dynamic modules, which is the point where you might want to disconnect some reducers in your application.

reducers.js

import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';

export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    ...asyncReducers
  });
}

store.js

import { createStore } from 'redux';
import createReducer from './reducers';

export default function configureStore(initialState) {
  const store = createStore(createReducer(), initialState);
  store.asyncReducers = {};
  return store;
}

export function injectAsyncReducer(store, name, asyncReducer) {
  store.asyncReducers[name] = asyncReducer;
  store.replaceReducer(createReducer(store.asyncReducers));
}

routes.js

import { injectAsyncReducer } from './store';

// Assuming React Router here but the principle is the same
// regardless of the library: make sure store is available
// when you want to require.ensure() your reducer so you can call
// injectAsyncReducer(store, name, reducer).

function createRoutes(store) {
  // ...

  const CommentsRoute = {
    // ...

    getComponents(location, callback) {
      require.ensure([
        './pages/Comments',
        './reducers/comments'
      ], function (require) {
        const Comments = require('./pages/Comments').default;
        const commentsReducer = require('./reducers/comments').default;

        injectAsyncReducer(store, 'comments', commentsReducer);
        callback(null, Comments);
      })
    }
  };

  // ...
}

There may be neater way of expressing this—I'm just showing the idea.

Answer 2

This is how I implemented it in a current app (based on code by Dan from a GitHub issue!)

// Based on https://github.com/rackt/redux/issues/37#issue-85098222
class ReducerRegistry {
  constructor(initialReducers = {}) {
    this._reducers = {...initialReducers}
    this._emitChange = null
  }
  register(newReducers) {
    this._reducers = {...this._reducers, ...newReducers}
    if (this._emitChange != null) {
      this._emitChange(this.getReducers())
    }
  }
  getReducers() {
    return {...this._reducers}
  }
  setChangeListener(listener) {
    if (this._emitChange != null) {
      throw new Error('Can only set the listener for a ReducerRegistry once.')
    }
    this._emitChange = listener
  }
}

Create a registry instance when bootstrapping your app, passing in reducers which will be included in the entry bundle:

// coreReducers is a {name: function} Object
var coreReducers = require('./reducers/core')
var reducerRegistry = new ReducerRegistry(coreReducers)

Then when configuring the store and routes, use a function which you can give the reducer registry to:

var routes = createRoutes(reducerRegistry)
var store = createStore(reducerRegistry)

Where these functions look something like:

function createRoutes(reducerRegistry) {
  return <Route path="/" component={App}>
    <Route path="core" component={Core}/>
    <Route path="async" getComponent={(location, cb) => {
      require.ensure([], require => {
        reducerRegistry.register({async: require('./reducers/async')})
        cb(null, require('./screens/Async'))
      })
    }}/>
  </Route>
}

function createStore(reducerRegistry) {
  var rootReducer = createReducer(reducerRegistry.getReducers())
  var store = createStore(rootReducer)

  reducerRegistry.setChangeListener((reducers) => {
    store.replaceReducer(createReducer(reducers))
  })

  return store
}

---

Here's a basic live example which was created with this setup, and its source:

• Example
• Source

It also covers the necessary configuration to enable hot reloading for all your reducers.

Answer 3

There is now a module that adds injecting reducers into the redux store. It is called Redux Injector.

Here is how to use it:

1. Do not combine reducers. Instead put them in a (nested) object of functions as you would normally but without combining them.

2. Use createInjectStore from redux-injector instead of createStore from redux.

3. Inject new reducers with injectReducer.

Here is an example:

import { createInjectStore, injectReducer } from 'redux-injector';

const reducersObject = {
   router: routerReducerFunction,
   data: {
     user: userReducerFunction,
     auth: {
       loggedIn: loggedInReducerFunction,
       loggedOut: loggedOutReducerFunction
     },
     info: infoReducerFunction
   }
 };

const initialState = {};

let store = createInjectStore(
  reducersObject,
  initialState
);

// Now you can inject reducers anywhere in the tree.
injectReducer('data.form', formReducerFunction);

Full Disclosure: I am the creator of the module.

Answer 4

As of October 2017:

• Reedux

  implements what Dan suggested and nothing more, without touching your store, your project or your habits

There are other libraries too but they might have too many dependencies, less examples, complicated usage, are incompatible with some middlewares or require you to rewrite your state management. Copied from Reedux's intro page:

• redux-modules
• redux-module-builder
• redux-stack
• paradux
• redux-dynamic-reducer
• redux-injector
• redux-dynamix

Answer 5

We released a new library that helps modulating a Redux app and allows dynamically adding/removing Reducers and middlewares.

Please take a look at https://github.com/Microsoft/redux-dynamic-modules

Modules provide the following benefits:

• Modules can be easily re-used across the application, or between multiple similar applications.

• Components declare the modules needed by them and redux-dynamic-modules ensures that the module is loaded for the component.

• Modules can be added/removed from the store dynamically, ex. when a component mounts or when a user performs an action

Features

• Group together reducers, middleware, and state into a single, re-usable module.
• Add and remove modules from a Redux store at any time.
• Use the included component to automatically add a module when a component is rendered
• Extensions provide integration with popular libraries, including redux-saga and redux-observable

Example Scenarios

• You don't want to load the code for all your reducers up front. Define a module for some reducers and use DynamicModuleLoader and a library like react-loadable to download and add your module at runtime.
• You have some common reducers/middleware that need to be re-used in different areas of your application. Define a module and easily include it in those areas.
• You have a mono-repo that contains multiple applications which share similar state. Create a package containing some modules and re-use them across your applications

Answer 6

Here is another example with code splitting and redux stores, pretty simple & elegant in my opinion. I think it may be quite useful for those who are looking for a working solution.

This store is a bit simplified it doesn't force you to have a namespace (reducer.name) in your state object, of course there may be a collision with names but you can control this by creating a naming convention for your reducers and it should be fine.

Answer 7

Following is the approach that I have followed to implement this. We have our store file where we will have static reducers who will always be present in the reducer, and dynamic reducers will be added when required component is mounted.

reducer file

The staticReducers that will always be present in the application

const staticReducers = combineReducers({
  entities1: entities1,
});

const createReducer = (asyncReducers) => {
  return combineReducers({
    staticReducers,
    ...asyncReducers,
  });
};

export default createReducer;

---

store file

Here we can have our custom middleware, loggers etc, those we can pass in the middlewares array.and use it as follows.

import { createStore, applyMiddleware, compose } from "redux";
import createReducer from "./reducers";
import api from "./middlewares/api";

const middlewares = [ api, thunkMiddleware]
const middlewareEnhancer = applyMiddleware(...middlewares)
const enhancers = [middlewareEnhancer]
const composedEnhancers = composeWithDevTools(compose(...enhancers))
const store = createStore(createReducer(), composedEnhancers)

export default function configureStore() {
  // Add a dictionary to keep track of the registered async reducers
  store.asyncReducers = {};

  // Create an inject reducer function
  // This function adds the async reducer, and creates a new combined 
  // reducer
  store.injectReducer = (key, asyncReducer) => {
    store.asyncReducers[key] = asyncReducer;
    store.replaceReducer(createReducer(store.asyncReducers));
  };

  // Return the modified store
  return store;
}

export function getStore() {
  return store;
}

---

Now suppose we have a component that we want to load dynamically and that component might have its own slice(reducer), then we can call inject reducer to dynamically add its to the existing reducer.

 const Counter2 = React.lazy(() =>
    import("../counter2/counter2").then(async (module) => {
    const entities2 = await 
    import("../../../store/entities2").then((todosModule) => 
    todosModule.default);
    store.injectReducer("entities2", entities2);
      return module;
    })
  )


  <React.Suspense fallback={<div>loading...</div>}>
     <Counter2  />
  </React.Suspense>

After mounting this component we will find entities2 injected to our store.