How do I handle async actions in Redux Toolkit with TypeScript?

How do I handle async actions in Redux Toolkit with TypeScript?

You can use createAsyncThunk from Redux Toolkit to handle async actions. It simplifies the process of creating actions and reducers.

Can you show me a basic example of using createAsyncThunk?

Sure! Here's a simple example:

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

export const fetchData = createAsyncThunk('data/fetch', async (id: number) => {
    const response = await fetch(`https://api.example.com/data/${id}`);
    return response.json();
});

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

This code defines an async thunk and a slice to manage the loading state and data.

What if I want to handle multiple async actions?

You can define multiple thunks and handle them in the same slice using the extraReducers. Just add more cases for each thunk!