How to Implement Redux Store in React

In this article, you will learn how to implement a Redux Store in a React application. We will cover the essential steps to set up state management, including installing the required Redux Toolkit and React-Redux packages, creating a slice to manage state transitions, configuring the central store, and connecting it to your React components using hooks.

Step 1: Install Required Packages

To implement Redux in React, you need to install Redux Toolkit (the recommended way to write Redux logic) and React-Redux (the official React binding library). Run the following command in your terminal:

npm install @reduxjs/toolkit react-redux

Step 2: Create a Redux Slice

A “slice” is a collection of Redux reducer logic and actions for a single feature of your application. Create a new file named counterSlice.js (or any name suited to your feature) and define your initial state and reducers:

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 3: Create and Configure the Store

Next, create a file named store.js to configure the central store. You will import the reducer from your slice and pass it to the configureStore function.

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

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

Step 4: Provide the Store to Your React App

To make the Redux store available to all components in your React application, wrap your root component with the Provider component from react-redux and pass the store as a prop. Open your main.js or index.js file and update it as follows:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './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

Now you can read data from the store and dispatch actions to update the state from any React component. Use the useSelector hook to read data and the useDispatch hook to dispatch actions.

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

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

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default Counter;