How do I use Redux Toolkit with TypeScript and Thunks?

How do I use Redux Toolkit with TypeScript and Thunks?

To use Redux Toolkit with TypeScript and Thunks, first, ensure you have the necessary packages installed. You need @reduxjs/toolkit and react-redux. Then, create a slice using createSlice and define your async logic using createAsyncThunk.

Can you show me an example of creating a thunk?

Sure! Here's a simple example:

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

export const fetchUser = createAsyncThunk('user/fetch', async (userId: string) => {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    return response.json();
});

How do I handle the thunk in my slice?

You can handle the thunk in your slice by adding extra reducers. Here's how:

const userSlice = createSlice({
    name: 'user',
    initialState: {},
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(fetchUser.fulfilled, (state, action) => {
            return action.payload;
        });
    },
});

What about typing the state and actions?

You can define types for your state and actions like this:

type UserState = { id: string; name: string; };
const initialState: UserState = { id: '', name: '' };