Next.js — Setting up a Redux store with combineReducers()

Redux is one of the most common libraries for state management in React projects. Here is a short guide about setting up a Redux store with combineReducers() in your Next.js project. This is a guide for beginners. If you have been playing with Next.js for a while, you probably don’t need this guide. Yet, I don’t find many people talking about this from Google. Hence, I would like to provide some sample codes. In case you just start to use Next.js, I hope this can be a starter for you to quickly begin with and save you some hours from studying it.

Storage — by nyvasng.com

Minimal Setup Example

To begin with, suppose you have already setup your basic Next.js project with _app root component, run npm install redux react-redux next-redux-wrapper to install Redux. Next, create a store folder inside your src folder or your root folder. After that, create some reducers to combine:

store/reducerA.js:

const initialState = {
  counter: 0
}
export default (state = initialState, action) => {
  switch (action.type) {
    case 'reducerA/setCounter':
      return {
        ...state,
        counter: action.payload
      }
    default:
      return state
  }
}

store/reducerB.js:

const initialState = {
  justAList: []
}