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)); | |
} |
This comment has been minimized.
This comment has been minimized.
for rendering server side, need change:
|
This comment has been minimized.
This comment has been minimized.
Does anyone have example of this working with SSR? |
This comment has been minimized.
This comment has been minimized.
WEBPACK 2 example here u r: routes.js
store.js (same, but only difference is pass initialState to check auth on server side and create store)
serverMiddleware.js (update auth)
and yeah, u should include "auth" reducer in combineReducers before: reducers.js
|
This comment has been minimized.
This comment has been minimized.
Just in case someone is interested. |
This comment has been minimized.
This comment has been minimized.
Here's a solution for injecting the initialState in async reducers, suggested by @gaearon |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
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:
EDIT: well it seems like I'm losing the default state from the async reducer... I'll investigate a bit more.