How to Setup Redux With Next.js Easily

We are supposed to create an counter application using Redux.

1. Create a new Next.js project:

npx create-next-app@latest

1. Install the Redux Toolkit and React-Redux:

npm install @reduxjs/toolkit react-redux

Configuring the Redux Store

1. Create a /storefolder in the src directory.

2. Inside the /store folder, create a store.ts file with the following code:

// store/store.ts
import { counterSlice } from '@/features/counter/counterSlice';
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
    reducer: {
        counter: counterSlice.reducer
    },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Wrapping Components with the Store Provider

To use the Redux store in your components, wrap them with a store provider. Create a new file in the /store folder named StoreProvider.tsx:

"use client";

import { store } from './store';
import { Provider } from 'react-redux';

export default function StoreProvider({ children }: { children: React.ReactNode }) {
    return (
        <Provider store={store}>
            {children}
        </Provider>
    );
}

Creating a Reducer (Slice)

Reducers handle state updates in Redux. To organize your code, create separate reducers if you have different global states. For example:

• Counter state: src/features/counter/counterSlice.ts

• Todo state: src/features/todo/todoSlice.ts

Counter Slice Example

btw you can also create this reducer in /store folder but if you want to follow best practices then create an folder structure like this src/features/counter/counterSlice.ts In the counterSlice.ts file we will create our counter reducer.

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

export interface CounterState {
    value: number;
}

const initialState: CounterState = {
    value: 0,
};

export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
            state.value += action.payload;
        },
    },
});

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

Key Concepts

1. Slice: A slice represents a piece of the Redux state and includes the state, reducers, and actions related to that piece.

2. Reducers: Functions that specify how the state changes in response to actions.

3. Actions: Plain JavaScript objects that describe what to do (e.g., increment or decrement the counter).

4. State: A central object holding all the application data that can be shared across components.

Using Redux in Components

To interact with Redux in your components, use the useSelector and useDispatch hooks from react-redux.

Counter Component Example

"use client";

import { decrement, increment } from '@/features/counter/counterSlice';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/store/store';

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

  return (
    <div className="grid items-center justify-items-center min-h-screen p-8 pb-20">
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  );
}

Let’s go now your counter application is completed and you will see it’s working fine.

This simple example demonstrates how to set up Redux, manage state, and interact with it in your components. You can extend this setup for more complex state management needs in your application.