How to Implement Redux in React

This article provides a straightforward, step-by-step guide on how to integrate Redux into a React application using the modern Redux Toolkit. You will learn how to install the necessary dependencies, configure a global state store, create state slices with reducers, and connect your React components to the store using React-Redux hooks.

Step 1: Install the Required Packages

To implement Redux in a React project, you need two packages: @reduxjs/toolkit (the official, recommended toolset for efficient Redux development) and react-redux (the bindings to connect Redux with React).

Run the following command in your terminal:

npm install @reduxjs/toolkit react-redux

Step 2: Create the Redux Store

The store is the central repository for your application’s state. Create a new file named store.js (typically inside a src/app or src/redux directory) and use configureStore to initialize it.

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

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

Step 3: Create a Redux Slice

A “slice” is a collection of Redux reducer logic and actions for a single feature. Create a file named counterSlice.js to define your state and the actions that can modify it.

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

const initialState = {
  value: 0,
};

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

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

Step 4: Provide the Store to Your React Application

To make the Redux store available to all React components, wrap your root component with the Provider component from react-redux and pass the store as a prop.

In your index.js or main.jsx file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Step 5: Use Redux State and Actions in Components

You can now read data from the store using the useSelector hook, and dispatch actions using the useDispatch hook.

Here is how you use them inside a component:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';

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

  return (
    <div>
      <div>
        <button onClick={() => dispatch(decrement())}>Decrease</button>
        <span>{count}</span>
        <button onClick={() => dispatch(increment())}>Increase</button>
      </div>
      <button onClick={() => dispatch(incrementByAmount(5))}>
        Add 5
      </button>
    </div>
  );
}