How I'd do code splitting in Redux (pseudo code, not tested!)

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

routes.js

import { injectAsyncReducer } from './store';

function createRoutes(store) {
  // ...

  const CommentsRoute = {
    // ...

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

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

  // ...
}

store.js

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

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

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

Hey @gaearon, thanks for the code!

However, when rendering server side, the server would inject the store state to a client that is not yet aware of the async reducers.

And If I understand correctly, if a store state is passed properties that don't have a matching reducer, it simply "skips" the properties. Meaning that the store in the client will result missing the async reducers state.

So in order to make this work, I needed to create pseudo reducers that would eventually be replaced with the real async reducers. Such as:

// reducers.js
export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    comments: (state = {}) => state, // <--- pseudo reducer
    ...asyncReducers
  });
}

EDIT: well it seems like I'm losing the default state from the async reducer... I'll investigate a bit more.

Hey @gaearon, thanks for the code!

However, when rendering server side, the server would inject the store state to a client that is not yet aware of the async reducers.

And If I understand correctly, if a store state is passed properties that don't have a matching reducer, it simply "skips" the properties. Meaning that the store in the client will result missing the async reducers state.

So in order to make this work, I needed to create pseudo reducers that would eventually be replaced with the real async reducers. Such as:

// reducers.js
export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    comments: (state = {}) => state, // <--- pseudo reducer
    ...asyncReducers
  });
}

EDIT: well it seems like I'm losing the default state from the async reducer... I'll investigate a bit more.

for rendering server side, need change:

export function injectAsyncReducer(store, name, asyncReducer) {
  if (store.asyncReducers[name]) {
    // console.error(`inject ${name} reducer twice!`);
    return;
  }  
  store.asyncReducers[name] = reducer;
  store.replaceReducer(createReducer(store.asyncReducers));
}

for rendering server side, need change:

export function injectAsyncReducer(store, name, asyncReducer) {
  if (store.asyncReducers[name]) {
    // console.error(`inject ${name} reducer twice!`);
    return;
  }  
  store.asyncReducers[name] = reducer;
  store.replaceReducer(createReducer(store.asyncReducers));
}

Does anyone have example of this working with SSR?

Does anyone have example of this working with SSR?

WEBPACK 2 example

here u r:

routes.js

  <Route
            getComponent={(nextState, cb) => {
              const name = "article",
                    page = System.import("./path/to/Page"),
                    reducer = System.import("./path/to/reducer");

              Promise
                .all([page, reducer])
                .then(result => {
                  const [page_component, async_reducer] = result;

                  injectAsyncReducer(store, name, async_reducer.default);
                  cb(null, page_component.default);
                });
            }}
            path="/path-to-something/"
          />

store.js (same, but only difference is pass initialState to check auth on server side and create store)

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

  return store;
}

serverMiddleware.js (update auth)

store = configureStore({auth: {
    user: req.user || null
  }});
...all_this_staff_with_match_etc

and yeah, u should include "auth" reducer in combineReducers before:

reducers.js

import auth from "./auth";

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

WEBPACK 2 example

here u r:

routes.js

  <Route
            getComponent={(nextState, cb) => {
              const name = "article",
                    page = System.import("./path/to/Page"),
                    reducer = System.import("./path/to/reducer");

              Promise
                .all([page, reducer])
                .then(result => {
                  const [page_component, async_reducer] = result;

                  injectAsyncReducer(store, name, async_reducer.default);
                  cb(null, page_component.default);
                });
            }}
            path="/path-to-something/"
          />

store.js (same, but only difference is pass initialState to check auth on server side and create store)

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

  return store;
}

serverMiddleware.js (update auth)

store = configureStore({auth: {
    user: req.user || null
  }});
...all_this_staff_with_match_etc

and yeah, u should include "auth" reducer in combineReducers before:

reducers.js

import auth from "./auth";

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

Just in case someone is interested.
I have implemented a running ssr example for next.js.

zeit/next.js#1459

Just in case someone is interested.
I have implemented a running ssr example for next.js.

zeit/next.js#1459

Here's a solution for injecting the initialState in async reducers, suggested by @gaearon
https://gist.github.com/cvbuelow/ea7bd4deb7824fdb65d81cd2b8c60f5e

Here's a solution for injecting the initialState in async reducers, suggested by @gaearon
https://gist.github.com/cvbuelow/ea7bd4deb7824fdb65d81cd2b8c60f5e