How to handle pending fulfilled and rejected states in async reducers

Question

Can you explain How to handle pending, fulfilled, and rejected states in async reducers?

Answer 1

With Redux Toolkit (Built-in Handling):

Use createAsyncThunk to automatically generate pending, fulfilled, and rejected action types.

Example:

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

export const fetchData = createAsyncThunk('data/fetch', async () => {

  const res = await fetch('/api/data');

  return res.json();

});


const dataSlice = createSlice({

  name: 'data',

  initialState: { loading: false, data: null, error: null },

  extraReducers: (builder) => {

    builder

      .addCase(fetchData.pending, (state) => {

        state.loading = true;

        state.error = null;

      })

      .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;

      });

  },

});