Redux toolkit with async API call using createAsyncThunk

In this redux toolkit article, we will show you how to create an async API call using createAsyncThunk action. In this example we will use Axios package for API call.

Checkout more articles on ReactJS

Demo Application

Output - Redux toolkit with async API call using createAsyncThunk - Clue Mediator

Redux toolkit with async API example

1. Create a react app
2. Install dependencies
3. Configure the store using redux toolkit
4. Create a user actions
5. Add action to userSlice
6. Call API action from react component
7. Output

1. Create a react app

First, Create a react application using `create-react-app`. Run the following command to create an application.

npx create-react-app redux-toolkit-api-example

We will refer the following project structure to create an example.

• redux-toolkit-api-example

  • node_modules

  • public

    • index.html

  • src

    • store

      • user

        • actions.js
        • userSlice.js

      • index.js

    • App.js

    • index.css

    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Install dependencies

Add the Redux Toolkit and React-Redux packages to your project. Also install the Axios to hit the API. Run the following command to install the packages.

npm i @reduxjs/toolkit react-redux axios

You may see the following versions in the `package.json` file.

react

^18.2.0

@reduxjs/toolkit

^1.9.1

react-redux

^8.0.5

axios

^1.2.0

3. Configure the store using redux toolkit

Now, we have to configure the store using redux toolkit. Refer to the following article for more information.

How to set up and use Redux Toolkit with React-Redux

4. Create a user actions

In this example, we will create a file named `actions.js` under `src/store/user` directory. In this file, we have to write an API to get the data using createAsyncThunk method.

A `createAsyncThunk` method that takes a string representing a Redux action type and a callback function that should produce a promise. Based on the action type prefix that you supply, it generates promise lifecycle action types and delivers a thunk action creator that will execute the promise callback and dispatch the lifecycle actions in accordance with the delivered promise.

src/store/user/actions.js

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

export const getUserList = createAsyncThunk('user/getUserList', async (page, { rejectWithValue }) => {
  try {
    const { data } = await axios.get(`https://reqres.in/api/users?per_page=2&page=${page}`);
    return data;
  } catch (error) {
    return rejectWithValue(error.message);
  }
})

5. Add action to userSlice

Let’s create a `userSlice.js` in the same directory and add the above action in the 1extraReducers`.

src/store/user/userSlice.js

import { createSlice } from "@reduxjs/toolkit";
import { getUserList } from "./actions";

const initialState = {
  data: [],
  isLoading: false,
  isSuccess: false,
  errorMessage: ''
}

export const userSlice = createSlice({
  name: 'user',
  initialState,
  extraReducers: {
    [getUserList.pending]: (state) => {
      state.isLoading = true;
    },
    [getUserList.fulfilled]: (state, { payload }) => {
      state.isLoading = false;
      state.isSuccess = true;
      state.data = payload;
    },
    [getUserList.rejected]: (state, { payload }) => {
      state.isLoading = false;
      state.isSuccess = false;
      state.errorMessage = payload
    }
  }
})

export default userSlice.reducer;

In the above code, you can see we have used three different actions of an API to update the store information.

6. Call API action from react component

At last, we have to design a react component to get the user data via API call on button click. So, we have added two buttons to get the next/previous page data and display on page.

src/App.js

import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { getUserList } from './store/user/actions'

const App = () => {
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()

  const [page, setPage] = useState(1)

  useEffect(() => {
    dispatch(getUserList(page))
  }, [page])

  return (
    <div>
      <h4>Redux toolkit with async API call using createAsyncThunk - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4>
      <button onclick="{()" ==""> setPage(prevPage => prevPage - 1)}>Previous</button>
      <button onclick="{()" ==""> setPage(prevPage => prevPage + 1)}>Next</button>
      <div><strong>Is Loading: </strong>{JSON.stringify(user.isLoading)}</div>
      <div><strong>Is Success: </strong>{JSON.stringify(user.isSuccess)}</div>
      <div><strong>Data: </strong>{JSON.stringify(user.data)}</div>
      <div><strong>Error Message: </strong>{user.errorMessage}</div>
    </div>
  )
}

export default App;

7. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository