When working with state management in React, Redux Toolkit (RTK) is the go-to solution for reducing boilerplate and simplifying the overall Redux workflow. It’s the official, recommended way to use Redux, offering built-in support for common tasks like asynchronous operations and immutable updates.

In this detailed guide, we’ll walk through everything you need to know about Redux Toolkit—from setting up a React project, to managing slices, to handling asynchronous actions, and more. We’ll focus on JavaScript (no TypeScript), so you can apply these concepts easily to any React project.

---

Setting Up the Project with React

Before diving into Redux Toolkit, we’ll set up a basic React project. We’ll use create-react-app to scaffold the project, followed by installing Redux Toolkit.

Step 1: Create a New React App

To create a new React project, open your terminal and run:

npx create-react-app redux-toolkit-demo

This will generate a new React project in a directory called redux-toolkit-demo. Navigate into the project directory:

cd redux-toolkit-demo

Step 2: Install Redux Toolkit and Redux

With the React project set up, let’s install the necessary Redux packages:

npm install @reduxjs/toolkit redux

Step 3: Clean Up the Project

Let’s clean up the default React app by removing unnecessary files and adjusting the App.js file.

1. Delete these files:

   • src/App.css

   • src/logo.svg

   • src/App.test.js

   • src/reportWebVitals.js

   • src/setupTests.js

2. Modify src/App.js to contain a simple component:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Redux Toolkit Demo</h1>
    </div>
  );
}

export default App;

With the React app set up, we’re ready to start integrating Redux Toolkit for state management.

---

Setting Up a Redux Toolkit Store

In traditional Redux, setting up the store involves manually creating the store and configuring middleware or DevTools separately. With Redux Toolkit’s configureStore, this process is simplified.

Step 1: Create the Redux Store

Let’s create a folder called app in the src directory to hold the store configuration. Inside app, create a file called store.js:

/src
  /app
    store.js

In store.js, configure the store using configureStore:

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

export const store = configureStore({
  reducer: {}, // We’ll add slices here soon
});

Step 2: Provide the Store to React

We need to provide the Redux store to our React application using the <Provider> component from react-redux. First, install react-redux if it's not already installed:

npm install react-redux

Next, wrap the app with the store provider in src/index.js:

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

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

With this, the Redux store is now connected to your React app and ready for state management.

---

Creating Slices with createSlice

In Redux Toolkit, you define state, actions, and reducers all in one place using createSlice. Let’s create a counter feature as an example.

Step 1: Create a Counter Slice

Create a new folder called features inside src. Within features, create a folder for the counter and a file named counterSlice.js:

/src
  /features
    /counter
      counterSlice.js

Inside counterSlice.js, define a slice for the counter feature:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1; // Immer handles immutability
    },
    decrement(state) {
      state.count -= 1;
    },
    incrementByAmount(state, action) {
      state.count += action.payload;
    }
  }
});

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

Step 2: Add the Slice to the Store

Now that we’ve created the counter slice, we need to add it to the store. Open src/app/store.js and modify it like this:

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

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

This connects the counter slice to the store.

---

Organizing Folder Structure for Redux Toolkit

As your application grows, managing your slices, actions, and reducers becomes important. It’s a good idea to organize your project by feature rather than by file type.

Recommended Folder Structure

Here’s a recommended structure for organizing a Redux Toolkit-based project:

/src
  /app
    store.js          # Store configuration
  /features
    /counter
      counterSlice.js  # Slice for counter state
    /user
      userSlice.js     # Slice for user state
  /components
    Counter.js         # React components (if using React)
    User.js

Explanation:

• app/: Contains the Redux store configuration.

• features/: Each folder inside features represents a feature of the application (e.g., counter, user).

• components/: Contains React components.

This folder structure ensures that each feature is self-contained and easy to maintain.

---

Handling Asynchronous Logic with createAsyncThunk

Many applications require handling async logic like API calls. Redux Toolkit’s createAsyncThunk makes this easy by managing async actions for you.

Step 1: Fetch User Data with createAsyncThunk

Let’s create a user slice that fetches data from an API asynchronously. Create a userSlice.js file inside a user folder under features:

/src
  /features
    /user
      userSlice.js

Inside userSlice.js, use createAsyncThunk to fetch user data:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// Async thunk for fetching user data
export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  async (userId) => {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: {},
    loading: false,
    error: ''
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export default userSlice.reducer;

Step 2: Add the User Slice to the Store

Now, add the user slice to the store in src/app/store.js:

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

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

Now you can dispatch the async action like this:

store.dispatch(fetchUserData(1));  // Fetch user data for user with ID 1

---

Middleware in Redux Toolkit

Middleware allows you to customize the behavior of Redux’s dispatch() method. Redux Toolkit comes with built-in middleware like redux-thunk, but you can also add custom middleware.

Example: Logger Middleware

Let’s create a simple logger middleware to log actions and state changes:

const loggerMiddleware = store => next => action => {
  console.log('Dispatching:', action);
  let result = next(action);
  console.log('Next state:', store.getState());
  return result;
};

const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(loggerMiddleware)
});

This logs every action that is dispatched and the state after the action is processed.

---

Redux DevTools and Immutability with Immer

Redux Toolkit comes with Redux DevTools enabled by default, so you can easily track actions and state changes in your app. Additionally, Immer is used under the hood to ensure immutability, so you can safely "mutate" the state directly in reducers.

---

Conclusion

Redux Toolkit simplifies state management in React applications by reducing boilerplate, ensuring immutability, and handling async logic. From setting up a React project, to organizing your slices, to managing asynchronous actions with createAsyncThunk, Redux Toolkit offers a complete solution for modern Redux development.

By following this step-by-step guide, you can efficiently build scalable state management systems in React using Redux Toolkit. Start incorporating these practices into your own projects and experience the power of streamlined Redux development!