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
Redux toolkit with async API example
- Create a react app
- Install dependencies
- Configure the store using redux toolkit
- Create a user actions
- Add action to userSlice
- Call API action from react component
- Output
1. Create a react app
First, Create a react application using create-react-app. Run the following command to create an application.
1 | 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
- user
- App.js
- index.css
- index.js
- store
- 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.
1 | npm i @reduxjs/toolkit react-redux axios |
You may see the following versions in the package.json file.
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.
1 2 3 4 5 6 7 8 9 10 11 | 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`.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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..!! 🙂
