DEV Community

Cover image for 📚 Redux Toolkit Setup Tutorial
Raynaldo Sutisna
Raynaldo Sutisna

Posted on • Updated on

📚 Redux Toolkit Setup Tutorial


Does anyone feel reluctant when you want to implement Redux in your react app? I always feel implementing Redux at the beginning is too much effort especially because Redux has a lot of boilerplate, and I always don't remember all the steps.
Luckily, we have Redux Toolkit now to answer our reluctance. Even though Redux Toolkit makes our life easier, I still can't remember all the steps. I have decided to make an easy tutorial for my notes.

Redux Inside My Head

I will not explain the concept of Redux itself, but I will mention the important points about Redux.

  • Redux is a global state
  • Redux is not necessary for every project.
  • You may need Redux if you don't want to do props drilling (passing props too deep).
  • If you are still confused about Redux, just think about the React state. The only difference is you can access the state from anywhere.

I always make Redux simple when I hear about Redux. Remember this statement.

Redux is a global state

It's basically a React state. What can you do if you have a react state? You can get the state and you can set state, right?

// Initial state
const [count, setCount] = useState(0);

// get state

// set state
Enter fullscreen mode Exit fullscreen mode

Just remember that concept get and set. In Redux, we can think that get is a selector, and set is a dispatch

If you want to learn in-depth, I suggest reading this documentation.

Especially this illustration.


let's skip to the good part!


You only need two npm packages.

npm install @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

Create a Redux Store


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

export default configureStore({
  reducer: {},
Enter fullscreen mode Exit fullscreen mode


I want to cover configure store a little bit. you can read the documentation here.

configureStore is only accepting one parameter, which is an Object, which is called ConfigureStoreOptions. Pay attention to my snippet again.

ConfigureStoreOptions has several attributes (? means optional):

  • reducers
  • middleware​?
  • devTools​?
  • preloadedState​?
  • enhancers​?

I'm not going crazy to explain all because I don't have that experience with those. However, the most important and easy to understand are reducers, devTools, and preloadedState

reducers (object)

the reducers attribute is the mandatory option that we put our reducers as attributes. The attribute name will be related to selector. I will explain later.

devTools​ (boolean)


devTools plugin links for Chrome and Firefox

It's something important for your development environment. The default value is true, so you don't necessary to add this attribute. However, you may need this attribute for the production environment.

preloadedState (object)

preloadedState is the same as the initial value in React state. If you want to put an initial value, you could put it in this attribute.

Include the Redux Store to App.js parent

This makes your whole app could access the Redux.

Wrap your <App /> component with the Provider and include the store that you made recently.

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

// ...
  <Provider store={store}>
    <App />
// ...
Enter fullscreen mode Exit fullscreen mode

Create a Redux State Slice

The main idea here is Slice will produce an action that we will use for dispatch and a reducer that we will use in configureStore.


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

export const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      const todo = {
        id: uuid(),
        text: action.payload,


// this is for dispatch
export const { addTodo } = todoSlice.actions;

// this is for configureStore
export default todoSlice.reducer;
Enter fullscreen mode Exit fullscreen mode

Here is the most complicated part of implementing redux. I assume you already know about Redux reducers. With createSlice, we don't need to implement the Redux reducer manually. However, there is something that you need to keep in mind. Redux Toolkit's createSlice is built-in with Immer

When we want to update React state, we can't mutate the state. Therefore, we need to create completely new data to update the state. This is the same paradigm in conventional Redux. However, Immer makes our life easier. We can mutate the state directly. Take a look at my example in the addTodo reducer function. I don't return anything, but I just mutate the state.

addTodo: (state, action) => {
  const todo = {
    id: uuid(),
    text: action.payload,

  // mutate the state
Enter fullscreen mode Exit fullscreen mode

Mutating the state is not the only way to update the state, we can also use the Redux immutable concept, which is using return

addTodo: (state, action) => {
  const todo = {
    id: uuid(),
    text: action.payload,

  // return a new data
  return [...state, todo];
Enter fullscreen mode Exit fullscreen mode

You can read the full documentation from Redux Toolkit about Immer here.

Add Slice Reducers to the Store

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from '../features/todo/todoSlice';

export default configureStore({
  reducer: {
    todos: todoReducer,
Enter fullscreen mode Exit fullscreen mode

Implementing useSelector and useDispatch in React Components


I mentioned before that if you want to get the state you will use a selector. This is how you can access the redux state.

import React from 'react';
import { useSelector } from 'react-redux';

export default function Todos() {
  const todos = useSelector((state) => state.todos);
  // todos comes from the reducer attribute name 
  // in configureStore

  return (
        { => (
          <li key={}>

Enter fullscreen mode Exit fullscreen mode
export default configureStore({
  reducer: {
    todos: todosReducer,
    // state.todos comes from this attribute name
Enter fullscreen mode Exit fullscreen mode


Lastly, if we want to modify the global state we need to useDispatch and the action that we already created in slice.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../features/todos/todosSlice';

export default function AddTodo() {
  const [text, setText] = useState('');
  // initial the dispatch here
  const dispatch = useDispatch();

  const addTodoHandler = (event) => {
    // update the state here using addTodo action
    // action only receive one parameter, which is payload

  return (
    <form onSubmit={addTodoHandler}>
        onChange={(e) => setText(}
      <button>Add todo</button>
Enter fullscreen mode Exit fullscreen mode


To sum up, we have 6 steps to implement the Redux Toolkit to our react project:

  • Install Redux Toolkit and React-Redux Packages
  • Create a Redux Store
  • Include the Redux Store to App.js parent
  • Create a Redux State Slice
  • Add Slice Reducers to the Store
  • Implementing useSelector and useDispatch in React Components

Congratulations! 🥳 you just learned how to use Redux Toolkit.
I also created a small project about this redux toolkit implementation.

Redux Toolkit Tutorial

app screenshoot

Read the full tutorial blog here

Live app link here

Thank you for reading 📚. Please leave a comment if you have any questions for me 🥰

Top comments (13)

andrewbaisden profile image
Andrew Baisden

Good tutorial Redux Toolkit makes React development so much more calm than how it used to be before this.

raaynaldo profile image
Raynaldo Sutisna

Thank you for the feedback!

zhannaosypenko profile image
Zhanna Osypenko • Edited

Great! Perfect algoritm and explanation. I include Toolkit conclusion in my notice. Thank you, Raynaldo.

paras231 profile image

great explanation

samjarvis244 profile image
Samuel Jarvis

This is the best redux explanation I've ever seen.

anesunapsta profile image
Anesu Napsta

Great, can you please do it on a CRUD operation.

raaynaldo profile image
Raynaldo Sutisna

I did in my example repository. You can take a look

dcavusoglu profile image
Duygu Çavuşoğlu

thank you Raynaldo

dcsan profile image

I think you want

export const { addTodo } = todoSlice.action;

to be actions ?

because redux requiring pages and pages of intricate boilerplate wasn't confusing enough so there's some autogenerated magic in there too. or maybe its just JS lib churn

raaynaldo profile image
Raynaldo Sutisna

Hi! Thank you so much for leaving this comment. Good catch! I just updated the code.

adambiggs profile image

Using components is a great way to structure web applications because they make it easier to reuse code. However, as the number of components grows, managing the communication and data flow between them becomes complex.

Redux and Context API are great solutions for managing data flow through React’s nested components. They both follow a similar philosophy: the state is taken outside the component tree and consumed as needed. In the case of Redux, external dependencies need to be installed, configured and maintained. Context API is integrated into the React core and requires minimal configuration.

If you are interested in learning a bit more about this, I'd recommend this article by Andy Fernandez, which dives into the details on Redux:

jrrs1982 profile image
Jeremy Smith

preloadedState overwrites initialState in your immer slices, so initialState should be empty - you can't remove as its a required field in the slice.

miiidnight profile image
Ali Mahmoodi

I spent days looking for a concise, easy to understand explaination about redux toolkit and this is the only one that helped me finally get it