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

Full extraReducers Builder

📖 Usage Example
builder
  .addCase(loadItems.pending, state => { state.status = 'loading' })
  .addCase(loadItems.fulfilled, (state, action) => {
    state.items = action.payload
    state.status = 'succeeded'
  })
  .addCase(loadItems.rejected, (state, action) => {
    state.status = 'failed'
    state.error = action.error.message
  })

Handling all three lifecycle actions gives you a complete async state machine: idle → loading → succeeded or failed.

Full extraReducers Builder

Handle all three thunk lifecycle actions in one slice. This covers pending (loading), fulfilled (success), and rejected (failure).

Challenge: Handle all three lifecycle actions for loadItems:

  • pending → status = 'loading'
  • fulfilled → items = payload, status = 'succeeded'
  • rejected → status = 'failed', error = message
💡 Hints (3)
  • • Chain `.addCase()` for all three lifecycle action creators.
  • • For rejected: `action.error.message` holds the error string.
  • • This pattern (idle → loading → succeeded/failed) is the standard async state machine.