JimmyVanVeen.com

In this blog post, we will be discussing how to apply types to the createAsyncThunk function from Redux Toolkit.

Redux Toolkit's createAsyncThunk function is a powerful tool for handling async actions in your Redux store. It allows you to handle the loading, success, and error states of an async action in a more organized and efficient way. However, one of the challenges with using this function is applying types to it correctly.

To apply types to createAsyncThunk, we first need to understand the arguments it takes. The function takes in three arguments: the first is the action type, the second is a function that returns a promise, and the third is an options object.

1import { createAsyncThunk } from '@reduxjs/toolkit'
2
3const fetchData = createAsyncThunk('fetchData', async () => {
4  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
5  return response.json();
6});

The action type is a string that represents the type of the action. It is used to identify the action in the reducer and should be unique across the application.

The second argument is the function that returns a promise. This function is where you will perform your async action, such as making a network request.

The third argument is an options object that can be used to configure the behavior of the async thunk.

To apply types to createAsyncThunk, we need to create a type for the payload of the action, the meta of the action, and the error of the action.

1interface Todo {
2  id: number;
3  title: string;
4  completed: boolean;
5}
6
7interface FetchDataPayload {
8  data: Todo;
9}
10
11interface FetchDataMeta {
12  id: number;
13}
14
15interface FetchDataError {
16  message: string;
17}
18
19const fetchData = createAsyncThunk<
20      FetchDataPayload,
21      FetchDataMeta,
22      FetchDataError
23>('fetchData', async () => {
24  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
25  return response.json();
26});

With these types applied, the payload of the action will be of type FetchDataPayload, the meta of the action will be of type FetchDataMeta and the error of the action will be of type FetchDataError. This allows us to have type safety when working with these actions and also allows us to have better intellisense when coding with the actions

In conclusion, applying types to the createAsyncThunk function from Redux Toolkit is an important step in ensuring type safety and better intellisense when working with async actions in your Redux store. By understanding the arguments that the function takes and creating types for the payload, meta, and error, you can ensure that your code is more organized, efficient, and less prone to errors.