How to Implement Redux Toolkit in React

Implementing Redux Toolkit in a React application simplifies global state management by eliminating boilerplate code and enforcing best practices out of the box. This guide provides a direct, step-by-step walkthrough to install Redux Toolkit, set up a global state store, create data slices, and connect them to React components using modern React-Redux hooks.

Step 1: Install Required Packages

First, install the Redux Toolkit package and the React bindings for Redux in your project directory:

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 in your app. Create a new file named counterSlice.js inside a state or features directory to manage a simple counter state.

// src/features/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. 
      // It uses the Immer library under the hood to ensure state remains immutable.
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Export the generated action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Export the reducer function to be registered in the store
export default counterSlice.reducer;

Step 3: Create the Redux Store

Next, configure the global Redux store using the configureStore API. This automatically sets up the Redux DevTools extension and middleware. Create a file named store.js.

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/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 React components, wrap your root component with the Provider component from react-redux and pass the configured store as a prop.

// src/main.jsx (or src/index.js)
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

Now you can read data from the store using the useSelector hook, and dispatch actions using the useDispatch hook inside your React components.

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

function App() {
  // Access the count value from the store
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default App;