State Management with Redux

This guide provides a step-by-step tutorial on setting up state management in a Next.js project using Redux Toolkit with Redux Persist.

1. Install Dependencies

Run the following command to install Redux Toolkit and Redux Persist:

npm install @reduxjs/toolkit react-redux next-redux-wrapper 

2. Configure Redux Store

Create a Redux store with persistence in src/redux/store.ts:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';
import counterReducer from './slices/counterSlice';
import { HYDRATE } from 'next-redux-wrapper'

const rootReducer = combineReducers({
  counter: counterReducer,
});

const reducer = (state, action) => {
    if (action.type === HYDRATE) {
      const nextState = {
        ...state,
        ...action.payload,
      }
      return nextState
    } else {
      return rootReducer(state, action)
    }
  }
  
  export const makeStore = () =>
    configureStore({
      reducer,
    })
  
  const store = makeStore()

3. Create a Redux Slice

Define a simple counter slice in src/redux/slices/counterSlice.ts:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

5. Provide the Store in Next.js

Wrap the application with the Redux Provider in src/app/providers.tsx:

'use client';
import { Provider } from 'react-redux';
import { store } from '../redux/store';
export default function Providers({ children }) {
  return (
    
        {children}
    
  );
}

6. Use Redux State in a Component

Use the Redux state in a component like Counter.tsx:

'use client';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../redux/slices/counterSlice';

export default function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
Counter: {count}
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    
  );
}