JS Built-ins
← redux-toolkit12 / 22
redux-toolkitcreateAsyncThunkintermediate

Handling Pending State

📖 Usage Example
extraReducers: builder => {
  builder
    .addCase(fetchData.pending, state => { state.loading = true })
    .addCase(fetchData.fulfilled, (state, action) => {
      state.loading = false
      state.data = action.payload
    })
}

The pending action is dispatched synchronously before the async work starts — ideal for showing a loading spinner.

Handling Pending State

The pending action fires immediately when a thunk is dispatched. Use it to show a loading indicator.

Challenge: Add a loading state that becomes true on pending and false on fulfilled.

dataSlice.reducer(undefined, fetchData.pending('req'))
// → { loading: true, value: null }
💡 Hints (3)
  • • Use `fetchData.pending` as the action creator in `builder.addCase`.
  • • The pending handler has no payload — just set `state.loading = true`.
  • • The fulfilled payload is `action.payload` — here it's `{ value: 42 }`.