Forem: Chinedu Oputa

Master createAysncThunk by reading this article.

Chinedu Oputa — Thu, 06 Nov 2025 14:35:05 +0000

Mastering Async Logic in Redux Toolkit with createAsyncThunk

Chinedu Oputa ・ Nov 6

Mastering Async Logic in Redux Toolkit with createAsyncThunk

Chinedu Oputa — Thu, 06 Nov 2025 14:33:13 +0000

Introduction

Modern JavaScript applications need to handle asynchronous logic — fetching data, posting forms, authentication, file uploads, etc. In older Redux projects, async operations required complex setups using middlewares like redux-thunk, action creators, constants, and reducers. This made Redux feel boilerplate-heavy and repetitive.
Redux Toolkit (RTK) changed everything. It streamlined Redux development and made async operations simpler, readable, and scalable with the createAsyncThunk() API. But what is createAsyncThunk()? Let’s answer that question in the next section.

What is create `createAsyncThunk()`

createAsyncThunk is a utility from Redux Toolkit designed to simplify writing async logic like API calls. It automatically:
Manages pending, fulfilled, and rejected actions
Handles errors for you
Supports async/await cleanly
Let reducers respond to async life cycles easily
Think of it as a smart wrapper for asynchronous requests in Redux.

Basic structure of `createAsyncThunk`

import { createAsyncThunk } from "@reduxjs/toolkit";

const postUrl = "https://jsonplaceholder.typicode.com/posts";

export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
 const response = await fetch(postUrl);
 if (!response.ok) throw Error("An error occoured! Unable to fetch posts.");
 const data = await response.json();
 return data;
});

From the code above, we see that createAsyncThunk takes two arguments. The first argument is used as a prefix for the automatically generated action types, and the code above automatically generates three Redux actions:
posts/fetchPosts/pending, triggered when the request starts
posts/fetchPosts/fulfilled, triggered when the request is successful
posts/fetchPosts/rejected, triggered when the request fails
The second argument is a payload creator callback and createAsyncThunk function above either returns a promise that contains some data or a rejected promise with an error. And as we see from the payload creator callback, we are fetching data from the jsonplaceholder website.
In Redux Toolkit, action creators are automatically generated based on the specified reducer in the createSlice function. However, sometimes, a slice reducer needs to respond to other actions that are not defined as part of the slice reducer. And this is the case for actions generated from createAsyncThunk.
Actions generated from createAsyncThunk are handled by extraReducers, which uses the builder callback notation as seen below:

  extraReducers: (builder) => {
   builder
     .addCase(fetchPosts.pending, (state, action) => {
       state.status = "loading";
     })
     .addCase(fetchPosts.fulfilled, (state, action) => {
       state.status = "success";
       let min = 1;
       const loadedPosts = action.payload?.map((post) => {
         post.date = sub(new Date(), { minutes: min++ }).toISOString();
         return post;
       });
       state.posts = state.posts.concat(loadedPosts);
     })
     .addCase(fetchPosts.rejected, (state, action) => {
       state.status = "failed";
       state.error = action.error?.message;
     })
 },
});

In Redux Toolkit (RTK), the builder callback notation is a pattern used inside createSlice() to define reducers for actions created by createAsyncThunk() or other external actions. Instead of defining reducers as an object, you use a function that receives a builder object parameter—allowing you to chain method calls to handle different action types more flexibly, as seen in the code above.
The builder parameter of the extraReducers function is an object that lets you define additional case reducers that run in response to the actions defined outside of the slice, as seen in the code above.
In this article, we will learn how to handle asynchronous logic in Redux Toolkit using createAsyncThunk by building a simple blog. But before we delve into this, the prerequisites to gain the most from this article are given below.

Prerequistes

NodeJS should be installed on your system
Knowledge of React
Knowledge of JavaScript
Knowledge of Redux Toolkit ## Building A Blog With React And Redux Toolkit Redux does everything synchronously, so anything asynchronous has to happen outside the store, and this is where redux middleware comes in. The most common Redux middleware is Redux Thunk. The word thunk is a programming term that means a piece of code that does some delayed work. And Redux thunk is recommended as the standard approach for writing async logic with Redux.

Redux Toolkit uses Redux thunk under the hood to handle asynchronous actions, and it is included by default in Redux Toolkit's configureStore.

In this section, we will learn how Redux handles asynchronous logic by building a blog with React and Redux Toolkit. Let’s get started in the subsection below:

Installation

We will work with Vite in this article. Vite is a super-fast build tool that replaces Create React App (CRA) for modern React development. To use it, in your terminal, run the code below:

npm create vite@latest counter-app

You’ll be prompted with something like this:

? Select a framework: › - Use arrow-keys. Return to submit.
  Vanilla
❯ React
  Vue
  Svelte
  Others

Choose React.
Now go into the app folder by running:

cd counter-app

Then run the app with:

npm run dev

After running the code above, to view the app, visit http://localhost:5173/, and you will get:

Next, install Redux Toolkit and the react-redux and date-fns package by running:

npm install @reduxjs/toolkit react-redux date-fns

Now we can set up Redux Toolkit inside the app. To do this, first, we configure the Redux store by following the steps in the next section.

Configure the Store

To configure the Redux store, create an app directory inside the src directory. Then create a file named store.js inside the app directory. Now add the code below to the store.js file:

// app/store.js

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

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

After configuring the store, we need to provide the global state to our application.

Provide the Store to React

To provide the store to React, replace the code in the main.jsx with the following code:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { store } from "./app/store.js";
import { Provider } from "react-redux";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

In the code above, we used the Provider component to provide our store — our global state, to our application. Next, we create a slice.

Create Slice

To create the postSlice, create a folder called features inside the src directory, and inside the features directory, create a folder named posts. Inside the posts directory, create a file named postSlice.js and add the code below to the postSlice.js:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { sub } from "date-fns";

const postUrl = "https://jsonplaceholder.typicode.com/posts";

export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
 const response = await fetch(postUrl);
 if (!response.ok) throw Error("An error occoured! Unable to fetch posts.");
 const data = await response.json();
 return data;
});

export const addPost = createAsyncThunk("post/addPost", async (postBody) => {
 const response = await fetch(postUrl, {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
   },
   body: JSON.stringify(postBody),
 });
 const data = await response.json();

 return data;
});


const initialState = {
 posts: [],
 status: "idle", // pending | success | failed
 error: null,
};

export const postSlice = createSlice({
 name: "posts",
 initialState,
 reducers: {},
 extraReducers: (builder) => {
   builder
     .addCase(fetchPosts.pending, (state, action) => {
       state.status = "loading";
     })
     .addCase(fetchPosts.fulfilled, (state, action) => {
       state.status = "success";
       let min = 1;
       const loadedPosts = action.payload?.map((post) => {
         post.date = sub(new Date(), { minutes: min++ }).toISOString();
         return post;
       });
       state.posts = state.posts.concat(loadedPosts);
     })
     .addCase(fetchPosts.rejected, (state, action) => {
       state.status = "failed";
       state.error = action.error?.message;
     })
     .addCase(addPost.fulfilled, (state, action) => {
       state.status = "success";
       action.payload.date = new Date().toISOString();
       state.posts.push(action.payload);
     })
 },
});

// get the initial state object in this slice
// this function is passed to the useSelector hook to get data from the initial state in this slice in a component.
export const selectPostSliceState = (state) => state.posts;

export const {} = postSlice.actions;

export default postSlice.reducer;

In the code above, the initialState is an object with 3 properties namely posts — which is an empty array because we have not hydrated it yet, status — which has a value of idle but the value can also be loading, succeeded or failed, and error — which have a value of null.

The selectPostSliceState function gives access to the initialState when it is used with the useSelector hook from a component, as seen below:
const { posts, status, error } = useSelector(selectPostSliceState)
When the code above is used inside a component, it destructures the posts, status, and error from the initialState.

The benefit of using this pattern instead of accessing the initialState from our components like this:

const { posts, status, error } = useSelector( (state) => state.posts)

is that if the shape of the initialState changes, we do not need to change the code in all the components where it is used; we only need to change the selectPostSliceState in the slice.

Next, we need to add the created reducer to the store. To do this, update the store.js file as seen in the code below:

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
 reducer: {
   posts: postReducer,
 },
});

Create Post List

Now, we create the postList component. To do this, in the posts directory inside the features directory, create a file named postList.jsx and add the code below to it:

import { useSelector } from "react-redux";
import { selectPostSliceState } from "./postSlice";
import PostItem from "./PostItem";

const PostList = () => {
 const { posts, status, error } = useSelector(selectPostSliceState);

 const sortedPosts = posts
   .slice()
   .sort((a, b) => b.date.localeCompare(a.date));

 return (
   <div>
     {status === "loading" && <h1>Loading...</h1>}
     {status === "failed" && <p>{error}</p>}
     {status === "success" &&
       sortedPosts.map((post) => <PostItem post={post} key={post.id} />)}
   </div>
 );
};

export default PostList;

The code above displays loading if status is loading, it displays the error if status is failed, and maps through the sortedPosts array passing each post to the PostItem component if status is success.
Next, let’s create the postItem component. To do this, create a file named postItem.jsx inside the posts directory that is in the features directory. Then add the code below to the postItem.jsx component:

import TimeAgo from "./TimeAgo";

const PostItem = ({ post }) => {

 return (
   <article>
     <div>
         <h2>{post.title}</h2>
         <TimeAgo timestamp={post.date} />
     </div>
   </article>
 );
};

export default PostItem;

Now, let's create the TimeAgo component. In the posts directory that is inside the features directory, create a component named TimeAgo.jsx and the following code to this component:

import { parseISO, formatDistanceToNow } from "date-fns";

const TimeAgo = ({ timestamp }) => {
 let timeAgo = "";
 if (timestamp) {
   const date = parseISO(timestamp);
   const timePeriod = formatDistanceToNow(date);
   timeAgo = `${timePeriod} ago`;
 }

 return (
   <span title={timestamp}>
     &nbsp; <i>{timeAgo}</i>
   </span>
 );
};

export default TimeAgo;

The code above displays the time in human-readable format using the date-fns package.

Create The `AddPost` Form

To do this, in the posts directory, inside the features directory, create a file named AddPost.jsx and add the following code to it:

import { useState } from "react";
import { useDispatch } from "react-redux";
import { addPost } from "./postSlice";

const AddPost = () => {
 const [title, setTitle] = useState("");
 const [body, setBody] = useState("");
 const dispatch = useDispatch();

 const onSavePostClicked = () => {
   try {
     const newPost = { title, body };
     dispatch(addPost(newPost)).unwrap();
   } catch (error) {
     console.log("error", error.message);
   }

   setTitle("");
   setBody("");
 };

 return (
   <section>
     <h2>Add a New Post</h2>
     <form>
       <label htmlFor="postTitle">Post Title:</label>
       <input
         id="postTitle"
         name="postTitle"
         onChange={(e) => setTitle(e.target.value)}
         value={title}
         type="text"
       />
       <label htmlFor="postContent">Content:</label>
       <textarea
         id="postContent"
         name="postContent"
         value={body}
         onChange={(e) => setBody(e.target.value)}
       />
       <button type="button" onClick={onSavePostClicked}>
         Submit
       </button>
     </form>
   </section>
 );
};

export default AddPost;

From the code above, we see that the AddPost component is a form with two controlled components, namely input and textarea.
The onSavePostClicked dispatch a thunk from the AddPost component (using dispatch(addPost(newPost)).unwrap()). This returns a promise — but by default, that promise does not reject on error. Instead, it always resolves to an “action object” describing what happened.
And that’s where .unwrap() comes in. The unwrap() method converts that action result back into a “normal” promise that behaves like a regular async/await call.

Now update the App.jsx file by replacing the code with the following:

import PostList from "./features/posts/PostList";
import AddPostForm from "./features/posts/AddPost";

function App() {
 return (
   <main className="App">
     <AddPostForm />
     <PostList />
   </main>
 );
}

export default App;

Finally, replace the code in the index.css file with the following:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 background: #333;
 color: whitesmoke;
}

body {
 min-height: 100vh;
 font-size: 1.5rem;
 padding: 0 10% 10%;
}

input,
textarea,
button,
select {
 font: inherit;
 margin-bottom: 1em;
}

main {
 max-width: 500px;
 margin: auto;
}

section {
 margin-top: 1em;
}

article {
 margin: 0.5em 0.5em 0.5em 0;
 border: 1px solid whitesmoke;
 border-radius: 10px;
 padding: 1em;
}

h1 {
 font-size: 3.5rem;
}

p {
 font-family: Arial, Helvetica, sans-serif;
 line-height: 1.4;
 font-size: 1.2rem;
 margin: 0.5em 0;
}

form {
 margin-top: 10px;
 display: flex;
 flex-direction: column;
}

.postCredit {
 font-size: 1rem;
}

Now, when we view our app, we get:

When we view the app, we only see the add post form. The posts from jsonplaceholder are not visible. This is not the kind of behaviour we want from our app. We want to load all posts once our app loads and display them. To achieve this, we call fetchPosts by using the code below:

 store.dispatch(fetchPosts());

Now, update the code in the main.jsx file with the following:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { store } from "./app/store.js";
import { Provider } from "react-redux";
import { fetchPosts } from "./features/posts/postSlice.js";

 // call fetchPosts
store.dispatch(fetchPosts());

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

Now, we get:

Conclusion

createAsyncThunk is one of the most powerful features of Redux Toolkit. It:
Removes async boilerplate
Simplifies API calls
Improves error handling
Works perfectly with modern React apps
Produces clean, scalable state management code

If you used to hate Redux for being "too heavy", Redux Toolkit — especially createAsyncThunk — will change your mind.
Lastly, I do hope that you have learned something from this article. Kindly leave your thoughts in the comment section below.

💼 Hire Me

I'm currently available for freelance or full-time frontend or backend development work.

What I do:

React, Redux Toolkit, NodeJS, ExpressJS, and TailwindCSS
Building scalable web applications
Creating responsive, user-friendly UIs

📧 Email: Leave a messsage

🌐 Portfolio: My portfolio
💬 LinkedIn: linkedin.com/in/yourprofile

If you like my work, let’s collaborate!

Understanding the prepare Callback In Redux Toolkit

Chinedu Oputa — Wed, 29 Oct 2025 13:42:18 +0000

Introduction

Redux Toolkit (RTK) has simplified the way developers write Redux logic by providing utilities that make state management more efficient, less verbose, and easier to maintain. And one of its powerful features is the prepare callback function.

If you’ve ever wanted to customize the payload or preprocess data before it reaches your reducers, the prepare callback is the right tool for the job. In this article, we’ll break down what the prepare callback is, how it works, and how you can use it effectively in your Redux applications — with clear, practical examples.

The prerequisite to gain the most from this article is given below, in the next section.

Prerequisite

NodeJS should be installed on your system
Knowledge of React
Knowledge of JavaScript
Knowledge of Redux Toolkit

Getting Started

In this section, we will learn what the prepare callback is and why we should use the prepare callback.

What Is the `prepare` Callback?

In Redux Toolkit, when you create a reducer using createSlice, each reducer automatically generates an action creator. By default, the action creator takes one argument — the payload — and passes it directly to the reducer.
However, sometimes you need more control over what the payload looks like before it’s passed to the reducer. For example:
You might want to add extra metadata like a timestamp or a unique ID.

You might want to merge multiple arguments into one structured payload.

You might need to transform or validate input before storing it.

That’s where the prepare callback comes in.
The prepare callback lets you preprocess action payloads before they reach your reducer. Essentially, it defines how the action’s payload (and optionally meta and error fields) should be structured.

Why Use the `prepare` Callback?

The prepare function is useful whenever your action payload needs more structure or logic than just passing a single argument.
Here are a few reasons why you might want to use it:

Add Metadata Automatically You can enrich actions with fields like timestamps, unique IDs, or user context.
Normalize Data If you receive nested or complex data, prepare can help flatten or reformat it before the reducer processes it.
Handle Multiple Arguments Normally, Redux action creators only accept one argument for the payload. With prepare, you can accept multiple arguments and decide how to package them.
Consistency By centralizing how payloads are structured, your reducers become cleaner and more predictable. To learn about the prepare callback, let’s build a blog with Redux Toolkit.

Building a Blog with React and Redux Toolkit

To build our blog, we first need to bootstrap a React application using Vite. Vite is a super-fast build tool that replaces Create React App (CRA) for modern React development. To use Vite, in your terminal, run the code below:

npm create vite@latest blog-app

You’ll be prompted with something like this:

? Select a framework: › - Use arrow-keys. Return to submit.
  Vanilla
❯ React
  Vue
  Svelte
  Others

Choose React.
Now go into the app folder by running:

cd blog-app

Then run the app with:

npm run dev

After running the code above, to view the app, visit http://localhost:5173/, and you will get:

Next, install Redux Toolkit and the react-redux package by running:

npm install @reduxjs/toolkit react-redux

Now we can set up Redux Toolkit inside the app. To do this, we configure the Redux store by following the steps in the next section.

Configure the `Store`

To configure the Redux store, create an app directory inside the src directory. Then create a file named store.js inside the app directory. Now add the code below to the store.js file:

// app/store.js

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

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

After configuring the store, we need to provide the global state to our application.

Provide the Store to React

To provide the store to React, replace the code in the main.jsx with the following code:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { store } from "./app/store.js";
import { Provider } from "react-redux";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

In the code above, we used the Provider component to provide our store — our global state, to our application. Next, we create a slice.

Create `Slice`

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

const initialState = {
 posts: [
   { id: 1, title: "Learning Redux Toolit", content: "Redux is amazing!" },
   { id: 2, title: "Mastering React", content: "React is awesome!" },
 ],
};

const postSlice = createSlice({
 name: "posts",
 initialState,
 reducers: {
   postAdded(state, action) {
     state.posts.push(action.payload);
   },
 },
});

export const { postAdded } = postSlice.actions;
export default postSlice.reducer;

In the code above, RTK automatically creates actions with the same name as the reducers provided, and these actions are exported.
Also, RTK uses Immer.js internally, allowing you to write “mutating” logic safely, as seen in the reducers in the code above.
Next, we need to add the created reducer to the store. To do this, update the store.js file as seen in the code below:

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
 reducer: {
   posts: postReducer,
 },
});

Create The Add Post Form

Before we display the post list, let's create the form to add new posts. To do this, create a file named AddPostForm .jsx inside the posts directory that is in the features directory. Now, add the following code to the AddPostForm.jsx:

import { useState } from "react";
import { useDispatch } from "react-redux";

import { postAdded } from "./postSlice";
import { nanoid } from "@reduxjs/toolkit";

const AddPostForm = () => {
 const dispatch = useDispatch();

 const [title, setTitle] = useState("");
 const [content, setContent] = useState("");

 const onTitleChanged = (e) => setTitle(e.target.value);
 const onContentChanged = (e) => setContent(e.target.value);

 const onSavePostClicked = () => {
   if (title && content) {
     dispatch(
       postAdded({
         id: nanoid(),
         title,
         content,
       })
     );
     setTitle("");
     setContent("");
   }
 };

 return (
   <section>
     <h2>Add a New Post</h2>
     <form>
       <label htmlFor="postTitle">Post Title:</label>
       <input
         type="text"
         id="postTitle"
         name="postTitle"
         value={title}
         onChange={onTitleChanged}
       />
       <label htmlFor="postContent">Content:</label>
       <textarea
         id="postContent"
         name="postContent"
         value={content}
         onChange={onContentChanged}
       />
       <button type="button" onClick={onSavePostClicked}>
         Save Post
       </button>
     </form>
   </section>
 );
};
export default AddPostForm;

In the code above, the input and textarea are controlled components, while the onSavePostClicked function is called when the form is submitted.
The onSavePostClicked function checks if there is a title and content value before dispatching an action by invoking the postAdded action creator. The postAdded action creator takes an object that contains the post ID — added using the nanoid package that comes with Redux Toolkit, the title, and the content.

Use Store In Components

Todo this, inside the posts directory in the features directory, create a Postlist.jsx file and add the following code:

import { useSelector } from "react-redux";

const PostList = () => {
 const posts = useSelector((state) => state.posts.posts);

 return (
   <section>
     <h2>Posts</h2>
     {posts.map((post) => (
       <article key={post.id}>
         <h3>{post.title}</h3>
         <p>{post.content.substring(0, 100)}</p>
       </article>
     ))}
   </section>
 );
};
export default PostList;

Now update the App.jsx file by replacing the code with the following:

import PostList from "./features/posts/PostList";
import AddPostForm from "./features/posts/AddPostForm";

function App() {
 return (
   <main className="App">
     <AddPostForm />
     <PostList />
   </main>
 );
}

export default App;

Finally, replace the code in the index.css file with the following:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 background: #333;
 color: whitesmoke;
}

body {
 min-height: 100vh;
 font-size: 1.5rem;
 padding: 0 10% 10%;
}

input,
textarea,
button,
select {
 font: inherit;
 margin-bottom: 1em;
}

main {
 max-width: 500px;
 margin: auto;
}

section {
 margin-top: 1em;
}

article {
 margin: 0.5em 0.5em 0.5em 0;
 border: 1px solid whitesmoke;
 border-radius: 10px;
 padding: 1em;
}

h1 {
 font-size: 3.5rem;
}

p {
 font-family: Arial, Helvetica, sans-serif;
 line-height: 1.4;
 font-size: 1.2rem;
 margin: 0.5em 0;
}

form {
 display: flex;
 flex-direction: column;
}

.postCredit {
 font-size: 1rem;
}

Now, when we view our app, we get:

Refactoring to use the `Prepare` Callback

Now, when you test the app, everything works fine. You can add new posts and view them. However, we can improve our app by using the prepare callback. Currently, in the AddPostForm.jsx component, the form is working properly, but it needs to know the details about the state in order to send it properly, as seen in the code below:

…
const onSavePostClicked = () => {
   if (title && content) {
     dispatch(
       postAdded({
         id: nanoid(),
         title,
         content,
       })
     );
     setTitle("");
     setContent("");
   }
 };
…

In the code above, we have to send a properly formatted object from the postAdded action creator, but we can abstract this since we do not want to duplicate this kind of logic in every component that posts to our global state. So a better way to do this is to handle this back in the postSlice using the prepare callback.

The prepare callback can generate unique IDs, format the data, and return the object with the payload. And this will simplify our component.
To do this, replace the code in the postSlice with the following:

import { createSlice, nanoid } from "@reduxjs/toolkit";

const initialState = {
 posts: [
   { id: 1, title: "Learning Redux Toolit", content: "Redux is amazing!" },
   { id: 2, title: "Mastering React", content: "React is awesome!" },
 ],
};

const postSlice = createSlice({
 name: "posts",
 initialState,
 reducers: {
   postAdded: {
     reducer(state, action) {
       state.posts.push(action.payload);
     },
     prepare(title, content) {
       return {
         payload: {
           id: nanoid(),
           title,
           content,
         },
       };
     },
   },
 },
});

export const { postAdded } = postSlice.actions;
export default postSlice.reducer;

The benefit of this change is that our component — in this case, the AddPostForm.jsx component does not need to know the structure of the state since that is now handled inside of the postSlice by the prepare callback, as seen in the code above.
Now, update the onSavePostClicked function in the AddPostForm.jsx component as seen below:

const onSavePostClicked = () => {
   if (title && content) {
     dispatch(postAdded(title, content));
     setTitle("");
     setContent("");
   }
 };

From the code above, we see that we can simply pass in the raw data — title and content to the postAdded action creator, keeping our component simple and clean.
Finally, test the app and everything still works fine.

Conclusion

The prepare callback in Redux Toolkit is a small but powerful feature that helps you write cleaner, more maintainable Redux code. It gives you control over how actions are structured before they hit your reducers, making your state updates more predictable.

And I hope that by going through this tutorial, you have learned something new about Redux Toolkit.

💼 Hire Me

I'm currently available for freelance or full-time frontend or backend development work.

What I do:

React, Redux Toolkit, NodeJS, ExpressJS, and TailwindCSS
Building scalable web applications
Creating responsive, user-friendly UIs

📧 Email: Leave a messsage

🌐 Portfolio: My portfolio
💬 LinkedIn: linkedin.com/in/yourprofile

If you like my work, let’s collaborate!

A helpful beginner's guide to Redxu Toolikt

Chinedu Oputa — Fri, 17 Oct 2025 12:11:09 +0000

Mastering Redux Toolkit: The Modern Way to Manage State in React

Chinedu Oputa ・ Oct 16

#webdev #react #frontend #beginners

Mastering Redux Toolkit: The Modern Way to Manage State in React

Chinedu Oputa — Thu, 16 Oct 2025 14:09:23 +0000

Introduction

Redux is a global state manager that allows you to manage your app state in a single place, which can be very useful. Redux has long been a cornerstone for state management in React applications, but it’s no secret that the original Redux setup was often too verbose and hard to learn. Developers had to write a lot of boilerplate just to do simple things like updating a counter or fetching data from an API.
Then came Redux Toolkit (RTK) — the official, recommended way to write Redux code.

RTK simplifies Redux development by providing powerful utilities that make state management easier, faster, and less error-prone.
In this guide, we’ll explore what Redux Toolkit is, why it matters, and how to use it effectively — with practical examples you can drop straight into your next React project.

What is Redux Toolkit?

Redux Toolkit (RTK) is the official, opinionated, batteries-included toolset for efficient Redux development.
It was created by the Redux team to solve the biggest issues developers had with Redux: excessive boilerplate, complex store configuration, and too many added packages.
RTK provides:

A simplified store configuration.
Built-in reducers and immutable updates using Immer.
Easy action creation.
Integrated middleware for async logic (like redux-thunk).
DevTools support and production-ready defaults out of the box.

In a nutshell, Redux Toolkit is an easier and modern way to implement the power of Redux as a global state manager. RTK lets you write less code, avoid common bugs, and get better performance — all while keeping the predictability of Redux.

Redux Toolkit itself is a single package, @reduxjs/toolkit. However, it is designed to be "batteries-included"; consequently, when you install it, you install the following integrated libraries:

Redux core: Redux Toolkit builds on top of the core Redux library, so it's a fundamental part of the toolkit.
Immer: This library simplifies immutable state updates, which is crucial for Redux. Redux Toolkit leverages Immer internally, particularly with createSlice.
Redux Thunk: This middleware enables handling asynchronous actions in Redux, and it's included by default in Redux Toolkit's configureStore.
Reselect: This library helps create memoized selectors for optimizing state access, and it's often used alongside Redux Toolkit.
Redux DevTools Extension: While a separate browser extension, Redux Toolkit's configureStore integrates with it by default for enhanced debugging.

In essence, when you install RTK, you are installing one package, but you are gaining access to a comprehensive set of tools and best practices, including the functionalities provided by these integrated libraries.
Although RTK is framework agnostic in this article, we will look at how to use RTK and React.
The prerequisites for this article are listed below:

Prerequisites

NodeJS should be installed on your system
Knowledge of React
Knowledge of JavaScript
Knowledge of Redux is not required, but it is an added advantage

React and Redux Toolkit

React has revolutionized the way developers build user interfaces. Its component-based architecture, virtual DOM, and declarative syntax make it a powerful library for creating dynamic web applications.
However, as applications grow, managing the state becomes challenging. Passing props through multiple components or handling complex asynchronous data can quickly lead to “prop drilling” and tangled logic. That’s where Redux Toolkit comes in — the modern, opinionated way to manage global state in React applications.

In this article, we create a simple counter application to learn how to set up Redux Toolkit and React.

Installation

We will work with Vite in this article. Vite is a super-fast build tool that replaces Create React App (CRA) for modern React development. To use it, in your terminal, run the code below:

npm create vite@latest counter-app

You’ll be prompted with something like this:

? Select a framework: › - Use arrow-keys. Return to submit.
  Vanilla
❯ React
  Vue
  Svelte
  Others

Choose React.
Now go into the app folder by running:

cd counter-app

Then run the app with:

npm run dev

After running the code above, to view the app, visit http://localhost:5173/, and you will get:

Next, install Redux Toolkit and the react-redux package by running:

npm install @reduxjs/toolkit react-redux

Now we can set up Redux Toolkit inside the app. To do this, first, we configure the Redux store by following the steps in the next section.

Configure the Store

Redux store and Redux are kind of used interchangeably; both stand for a container for JavaScript apps. And this stores the whole state of the app in an immutable object tree.

To configure the Redux store, create an app directory inside the src directory. Then create a file named store.js inside the app directory. Now add the code below to the store.js file:

// app/store.js

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

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

After configuring the store, we need to provide the global state to our application.

Provide the `store` to React

To provide the store to React, replace the code in the main.jsx with the following code:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { store } from "./app/store.js";
import { Provider } from "react-redux";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

In the code above, we used the Provider component to provide our store — our global state, to our application. Next, we create a slice.

Create a Slice

The term slice comes from splitting up a Redux state object into multiple slices of state.
A slice contains your state, reducers, and automatically generated actions for a single feature in the app. For example, a blog might have a slice for posts and another slice for comments. So in this article, our app will have a slice for counter. To create the counter slice, create a folder called features inside the src directory, and inside the features directory, create another directory called counter, then create a file named counterSlice.js in the counter directory and add the code below to the counterSlice.js:

// features/counter/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
 name: "counter",
 initialState: { count: 0 },
 reducers: {
   increment: (state) => {
     state.count += 1;
   },
   decrement: (state) => {
     state.count -= 1;
   },
   reset: (state) => {
     state.count = 0;
   },
 },
});
export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

Update the Store

After creating the counterSlice, we need to add the counterReducer to the store. To do this, update the code in the store.js file as seen below:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
export const store = configureStore({
 reducer: {
   counter: counterReducer,
 },
});

Now that we have added the counterReducer to the store, it is available to the entire app through the Provider.

Use the Store in Components

To do this, in the counter directory inside the features directory, create a Counter.js file and add the following code to this file:

// features/counter/Counter.js
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./counterSlice";

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

 const resetAll = () => {
   dispatch(reset());
 };

 return (
   <section>
     <p>{count}</p>
     <div>
       <button onClick={() => dispatch(increment())}>+</button>
       <button onClick={() => dispatch(decrement())}>-</button>
     </div>

     <div>
       <button onClick={resetAll}>Reset</button>
     </div>
   </section>
 );
};
export default Counter;

In the code above, the useSelector and the useDispatch hooks are imported from react-redux.
Also, the increment, decrement, and reset action creators are imported from the counterSlice.
The useSelector hook is used to get the value of count from the counterSlice, while the useDispatch hook is used to dispatch actions — created by invoking an action creator following the click of a button. So in the code above, actions created by the increment, decrement, and reset action creators are handled by the increment, decrement, and reset reducers in the counterSlice.

Now, to view the counter, we replace the codes in the App.js file with the following:

import Counter from "./features/counter/Counter";

function App() {
 return (
   <main className="App">
     <Counter />
   </main>
 );
}

export default App;

Then replace the codes in the index.css file with the following:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 min-height: 100vh;
 font-size: 5rem;
 display: grid;
 place-content: center;
}

input,
button {
 font: inherit;
 padding: 0.5rem;
}

section {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

input {
 text-align: center;
 max-width: 2.5em;
}

button {
 font-size: 2rem;
 margin: 0.5em 0 0.5em 0.5em;
 min-width: 2em;
}

button:first-child {
 margin-left: 0;
}

Finally, when you view the app in the browser, you get:

You can test the app by clicking on the increment, decrement, and reset buttons.

Conclusion

Redux Toolkit has completely transformed how developers use Redux.
What was once seen as too complicated is now simple, elegant, and enjoyable.
The above application is a simple application that shows how Redux Toolkit is set up and the overall structure of an application. However, I do hope that by following this application, you will get an understanding of Redux Toolkit and how it is used with React.
If you’re still managing state with plain Redux, now is the time to switch. You’ll write cleaner code, reduce bugs, and enjoy a better development experience.

💼 Hire Me

I'm currently available for freelance or full-time frontend or backend development work.

What I do:

React, Redux Toolkit, NodeJS, ExpressJS, and TailwindCSS
Building scalable web applications
Creating responsive, user-friendly UIs

📧 Email: Leave a messsage

🌐 Portfolio: My portfolio
💬 LinkedIn: linkedin.com/in/yourprofile

If you like my work, let’s collaborate!

Forem: Chinedu Oputa

Master createAysncThunk by reading this article.

Mastering Async Logic in Redux Toolkit with createAsyncThunk

Chinedu Oputa ・ Nov 6

Mastering Async Logic in Redux Toolkit with createAsyncThunk

Introduction

What is create createAsyncThunk()

Basic structure of createAsyncThunk

Prerequistes

Installation

Configure the Store

Provide the Store to React

Create Slice

Create Post List

Create The AddPost Form

Conclusion

💼 Hire Me

Understanding the prepare Callback In Redux Toolkit

Introduction

Prerequisite

Getting Started

What Is the prepare Callback?

Why Use the prepare Callback?

Building a Blog with React and Redux Toolkit

Configure the Store

Provide the Store to React

Create Slice

Create The Add Post Form

Use Store In Components

Refactoring to use the Prepare Callback

Conclusion

💼 Hire Me

A helpful beginner's guide to Redxu Toolikt

Mastering Redux Toolkit: The Modern Way to Manage State in React

Chinedu Oputa ・ Oct 16

Mastering Redux Toolkit: The Modern Way to Manage State in React

Introduction

What is Redux Toolkit?

Prerequisites

React and Redux Toolkit

Installation

Configure the Store

Provide the store to React

Create a Slice

Update the Store

Use the Store in Components

Conclusion

💼 Hire Me

What is create `createAsyncThunk()`

Basic structure of `createAsyncThunk`

Create The `AddPost` Form

What Is the `prepare` Callback?

Why Use the `prepare` Callback?

Configure the `Store`

Create `Slice`

Refactoring to use the `Prepare` Callback

Provide the `store` to React