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 Providercomponent 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;