react: next-redux-saga
instead of using the Provider
component, you can use the withRedux
higher order component to inject the store initialization functionality.
import withRedux from 'next-redux-wrapper'; import initializeStore from './path/to/store'; const HomePage = () => <div> That's the home page. </div> export default withRedux(initializeStore)(HomePage);
Basically, in a server-side rendered React application with Next.js, you can exchange the Provider
component from react-redux with withRedux
from next-redux-wrapper. You can use it for every entry point in your pages/ directory.
In your child components, you can still use the connect
higher order component from react-redux to make your Redux store accessible with mapStateToProps
and mapDispatchToProps
. It works the same as before.
Redux Saga + Next.js
Last but not least, I had the requirement to use Redux Saga for asynchronous Redux actions in my Next.js application. The basic Redux Saga middleware lookup when creating a Redux store looks similar to this
import createSagaMiddleware from 'redux-saga'; import rootSaga from 'path/to/combined/sagas'; import rootReducer from 'path/to/combined/reducers'; const saga = createSagaMiddleware(); const initializeStore = initialState => { const store = createStore( rootReducer, initialState, applyMiddleware(saga) ); saga.run(rootSaga); return store; }; export default initializeStore;