How do I handle async actions in Redux Toolkit?

How do I handle async actions in Redux Toolkit?

You can handle async actions in Redux Toolkit using createAsyncThunk. It simplifies the process of creating actions for async operations.

Can you give me an example of using createAsyncThunk?

Sure! Here's a simple example:

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

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

What do I do with the fetched data in my slice?

You can handle the fetched data in your slice by adding extra reducers to update the state based on the action's lifecycle.

Can you show me how to set up the slice with those extra reducers?

Absolutely! Here's how you can set up your slice:

import { createSlice } from '@reduxjs/toolkit';
import { fetchUser } from './pathToYourThunk';

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

export default userSlice.reducer;