Skip to content

Instantly share code, notes, and snippets.

@gaearon
Last active December 11, 2020 14:56
Show Gist options
  • Save gaearon/0a2213881b5d53973514 to your computer and use it in GitHub Desktop.
Save gaearon/0a2213881b5d53973514 to your computer and use it in GitHub Desktop.
How I'd do code splitting in Redux (pseudo code, not tested!)
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});
}
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);
})
}
};
// ...
}
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));
}
@cvbuelow
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment