Blog

Prev in ReactJSReact Context API for State Management

ReactJS Redux State Management Frontend Development

React With Redux Toolkit

Mohammad Abu MattarPublished: 02 Dec 202206 Mins read10 Mins listen

Prerequisites

This post assumes that you have a basic understanding of React and Redux, and it helps if you have some experience with React Hooks like useReducer.

Introduction

Nowadays, we have a lot of state management libraries for React, such as Redux, MobX, and Recoil. In this post, we will learn how to use Redux Toolkit to manage the state of our React application.

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

What is Redux Toolkit?

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic.

It was originally created to help address three common concerns about Redux:

Configuring a Redux store is too complicated.
I have to add a lot of packages to get Redux to do anything useful.
Redux requires too much boilerplate code.

Why Redux Toolkit?

Redux Toolkit is a package that contains a set of tools to help you write Redux logic more easily. It is not a Redux replacement, but it is an alternative to writing Redux logic by hand.

Installation

Step 1: initialize a React project using vite

First, we need to initialize a React project using vite.

1
# using npm
2
npm init vite react-with-redux-toolkit
3

4
# using yarn
5
yarn create vite react-with-redux-toolkit
6

7
# using pnpm
8
pnpm create vite react-with-redux-toolkit
9

10
# using npx
11
npx create-vite react-with-redux-toolkit

1
# select the react
2
? Select a framework: react

1
# select the javascript
2
? Select a variant: javascript

Note

You can use npm, yarn, pnpm, or npx to initialize a React project using vite.

Note

You can use typescript instead of javascript to initialize a React project using vite.

Step 2: go to the project directory

1
cd react-with-redux-toolkit

Step 3: install the basic dependencies

1
# using npm
2
npm install
3

4
# using yarn
5
yarn install
6

7
# using pnpm
8
pnpm install

Step 4: install Redux Toolkit

1
# using npm
2
npm install @reduxjs/toolkit react-redux
3

4
# using yarn
5
yarn add @reduxjs/toolkit react-redux
6

7
# using pnpm
8
pnpm add @reduxjs/toolkit react-redux

Usage

Step 1: remove the unnecessary files

We will remove the unnecessary files and clean up the src directory.

1
rm -rf src/*

Explanation:

rm - remove files or directories
-rf - remove directories and their contents recursively

Step 2: create the basic structure

Step 2.1: create the folders and files

We will create the basic structure of our project.

1
# create the components directory
2
mkdir src/components
3

4
# create the store directory
5
mkdir src/app
6

7
# create the App.jsx file
8
touch src/App.jsx
9

10
# create the main.jsx file
11
touch src/main.jsx

Step 2.2: create the `App.jsx` file

We will create the App.jsx file.

1
const App = () => {
2
  return (
3
    <div>
4
      <p>React With Redux Toolkit - Part 1</p>
5
    </div>
6
  );
7
};
8

9
export default App;

Step 2.3: create the `main.jsx` file

We will create the main.jsx file.

1
import App from './App';
2
import React, {StrictMode} from 'react';
3
import ReactDOM from 'react-dom/client';
4

5
ReactDOM.createRoot(document.getElementById('root')).render(
6
  <StrictMode>
7
    <App />
8
  </StrictMode>,
9
);

Step 3: create the store

Step 3.1: create the `store.js` file

We will create the store.js file.

1
import {configureStore} from '@reduxjs/toolkit';
2

3
const store = configureStore({
4
  reducer: {},
5
});
6

7
export default store;

As you can see, we have imported the configureStore function from @reduxjs/toolkit and we have created the store using the configureStore function.

Explanation:

import { configureStore } from '@reduxjs/toolkit' - import the configureStore function
const store = configureStore({ reducer: {} }) - create the store using the configureStore function
export default store - export the store

Note

We will add the reducer later.

After that, we will make some changes to the main.jsx file.

1
import App from './App';
2
import store from './app/store';
3
import React, {StrictMode} from 'react';
4
import ReactDOM from 'react-dom/client';
5
import {Provider} from 'react-redux';
6

7
ReactDOM.createRoot(document.getElementById('root')).render(
8
  <StrictMode>
9
    <Provider store={store}>
10
      <App />
11
    </Provider>
12
  </StrictMode>,
13
);

You’ll notice that we have wrapped the App component with the Provider component, after importing it from the react-redux library. We also imported the store from ./app/store. Then we passed that store to the Provider component.

Explanation:

import { Provider } from 'react-redux' - import the Provider component
import store from './app/store' - import the store
<Provider store={store}> - pass the store to the Provider component

Step 4: create the `counterSlice.js` file

We will create the counterSlice.js file.

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

3
const initialState = {
4
  count: 0,
5
};
6

7
const counterSlice = createSlice({
8
  name: 'counter',
9
  initialState,
10
  reducers: {
11
    increment: (state) => {
12
      state.count += 1;
13
    },
14
    decrement: (state) => {
15
      state.count -= 1;
16
    },
17
    reset: (state) => {
18
      state.count = 0;
19
    },
20
    incrementByAmount: (state, action) => {
21
      state.count += action.payload;
22
    },
23
  },
24
});
25

26
export const {increment, decrement, reset, incrementByAmount} =
27
  counterSlice.actions;
28

29
export default counterSlice.reducer;

The createSlice function is used to create a slice of the store. We passed the name of the slice as counter and the initial state as initialState. We passed the reducers as an object, holding increment, decrement, reset, and incrementByAmount. Then we exported the increment, decrement, reset, and incrementByAmount actions, and the reducer itself.

Explanation:

import { createSlice } from '@reduxjs/toolkit' - import the createSlice function
const initialState = { count: 0 } - define the initial state of the slice
const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.count += 1 }, decrement: (state) => { state.count -= 1 }, reset: (state) => { state.count = 0 }, incrementByAmount: (state, action) => { state.count += action.payload }, } }) - create the slice of the store
export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions - export the actions
export default counterSlice.reducer - export the reducer

Step 5: add the `counterSlice` reducer to the store

We will add the counterSlice reducer to the store.

1
import counterReducer from '../components/Counter/counterSlice';
2
import {configureStore} from '@reduxjs/toolkit';
3

4
const store = configureStore({
5
  reducer: {
6
    counter: counterReducer,
7
  },
8
});
9

10
export default store;

Now after adding the counterSlice reducer to the store, it will be available in the entire application.

Explanation:

import counterReducer from '../components/Counter/counterSlice' - import the counterSlice reducer
reducer: { counter: counterReducer } - add the counterSlice reducer to the store

Step 6: create the Counter component

We will create the Counter component.

1
import {increment, decrement, reset, incrementByAmount} from './counterSlice';
2
import React from 'react';
3
import {useSelector, useDispatch} from 'react-redux';
4

5
const Counter = () => {
6
  const count = useSelector((state) => state.counter.count);
7
  const dispatch = useDispatch();
8

9
  return (
10
    <div>
11
      <p>Count: {count}</p>
12
      <button onClick={() => dispatch(increment())}>Increment</button>
13
      <button onClick={() => dispatch(decrement())}>Decrement</button>
14
      <button onClick={() => dispatch(reset())}>Reset</button>
15
      <button onClick={() => dispatch(incrementByAmount(5))}>
16
        Increment By 5
17
      </button>
18
    </div>
19
  );
20
};
21

22
export default Counter;

As you can see, we have imported the useSelector and useDispatch hooks from react-redux, and the increment, decrement, reset, and incrementByAmount actions from ./counterSlice. We use useSelector to get the count from the store, and useDispatch to dispatch the actions. Each button dispatches one of those four actions.

Explanation:

import { useSelector, useDispatch } from 'react-redux' - import the useSelector hook and the useDispatch hook
import { increment, decrement, reset, incrementByAmount } from './counterSlice' - import the actions
const count = useSelector((state) => state.counter.count) - get the count from the store
const dispatch = useDispatch() - get the dispatch function
onClick={() => dispatch(increment())} - dispatch the increment action
onClick={() => dispatch(decrement())} - dispatch the decrement action
onClick={() => dispatch(reset())} - dispatch the reset action
onClick={() => dispatch(incrementByAmount(5))} - dispatch the incrementByAmount action

Step 7: add the Counter component to the App component

We will add the Counter component to the App component.

1
import Counter from './components/Counter/Counter';
2
import React from 'react';
3

4
const App = () => (
5
  <div>
6
    <Counter />
7
  </div>
8
);
9

10
export default App;

As you can see, we have imported the Counter component and added it to the App component.

Explanation:

import Counter from './components/Counter/Counter' - import the Counter component
<Counter /> - add the Counter component to the App component

Step 8: Run the application

We will run the application.

1
yarn dev

Redux Toolkit Counter

As you can see, we have a counter. We can increment it, decrement it, reset it, and increment it by 5.

Step 9: access the `count` value in other components

We will access the count value in other components, for example, in the Header component.

1
import React from 'react';
2
import {useSelector} from 'react-redux';
3

4
const Header = () => {
5
  const count = useSelector((state) => state.counter.count);
6

7
  return (
8
    <header>
9
      <h1>Redux Toolkit Counter</h1>
10
      <p>Count: {count}</p>
11
    </header>
12
  );
13
};
14

15
export default Header;

As you can see, we have imported the useSelector hook from react-redux. We use it to get the count value from the store, and then render that value inside the Header component.

Explanation:

import { useSelector } from 'react-redux' - import the useSelector hook
const count = useSelector((state) => state.counter.count) - get the count from the store
<p>Count: {count}</p> - add the count to the Header component

Step 10: add the Header component to the App component

We will add the Header component to the App component.

1
import Counter from './components/Counter/Counter';
2
import Header from './components/Header/Header';
3
import React from 'react';
4

5
const App = () => (
6
  <div>
7
    <Header />
8
    <Counter />
9
  </div>
10
);
11

12
export default App;

As you can see, we have imported the Header component and added it to the App component.

Explanation:

import Header from './components/Header/Header' - import the Header component
<Header /> - add the Header component to the App component

Step 11: Run the application

We will run the application.

1
yarn dev

Redux Toolkit Counter with Header

As you can see, we have a counter we can increment, decrement, reset, and increment by 5. We also have a header showing the same count value.

Source Code

You can find the source code for this tutorial on GitHub. You can clone the repository and run the application.

1
# Clone the repository
2
git clone https://github.com/MKAbuMattar/react-with-redux-toolkit.git
3

4
# Go inside the directory
5
cd react-with-redux-toolkit
6

7
# Install dependencies
8
yarn install
9

10
# Run the application
11
yarn dev

Conclusion

In this article, we learned how to set up a Redux store with Redux Toolkit. We created a Redux slice, wrote the actions and the reducers, and built the store from them. We added that store to the App component through the Provider. We added the Counter component to the App component, read the count value from a second component, and added the Header component to the App component as well.

Resources

Was this useful?

React With Redux Toolkit