Read a thunk's original result
Use it after dispatching an async thunk when the caller needs the successful data rather than the lifecycle action object.
Redux Toolkit · Function
unwrapResult
unwrapResult converts the action returned by a dispatched createAsyncThunk into its original result. It returns a fulfilled payload and throws the rejection payload or error for failed thunks.
How it works
unwrapResult accepts the completed action returned by dispatching a createAsyncThunk thunk. It returns the fulfilled action's payload, but throws the rejected action's error or its payload when rejectWithValue supplied one, allowing ordinary promise-style error handling.
Syntax
unwrapResult(resultAction)Parameters
| Name | Type | Description |
|---|---|---|
resultAction | AnyAction | The fulfilled or rejected action returned by dispatching a thunk created with createAsyncThunk. |
Returns
The fulfilled action payload; throws the rejected action's payload when supplied by rejectWithValue, otherwise throws the rejected action's error.
Key points
- The function is exported by Redux Toolkit and provides an alternative to the attached promise unwrap method.
- For a successful thunk action, unwrapResult returns the action payload rather than the action wrapper.
- For rejection, it raises the custom payload when available, otherwise the action error.
- With async/await, first await dispatch and then pass the resulting action to unwrapResult.
Common mistakes
- The dispatched thunk promise does not reject by itself; use unwrapResult when the caller needs failure to enter catch-style handling.
- Do not inspect only the resolved action when inline success or failure behavior is required; explicitly unwrap it.
Example: Unwrap an async thunk result
import { createAsyncThunk, unwrapResult } from '@reduxjs/toolkit'
const fetchUserById = createAsyncThunk('users/fetchById', async (id: string) => {
const response = await fetch(`/api/users/${id}`)
if (!response.ok) throw new Error('Request failed')
return response.json()
})
async function loadUser(dispatch: (action: unknown) => Promise<unknown>) {
try {
const resultAction = await dispatch(fetchUserById('42'))
const user = unwrapResult(resultAction as Parameters<typeof unwrapResult>[0])
console.log(user)
} catch (error) {
console.error(error)
}
}Dispatches an async thunk, converts its completed action into the original payload, and handles either thrown errors or rejectWithValue data.
When to use it
Promise-style error handling
Place it in a promise chain so rejected thunk outcomes enter catch handling.
Handle typed rejection data
Call it inside try/catch when using async/await and custom rejectWithValue payloads.
Interview questions
QWhat does unwrapResult do?
unwrapResult receives the fulfilled or rejected action produced by dispatching a createAsyncThunk thunk. It returns the fulfilled payload, or throws the rejection error or rejectWithValue payload.
Follow-up: Why might .unwrap() be preferred? The documentation says the promise returned by the dispatched thunk already exposes .unwrap(), and describes using it as preferred in most cases.
QWhy is unwrapping needed after dispatch?
A createAsyncThunk dispatch resolves with an action object regardless of whether the request succeeded. Calling unwrapResult converts that action into promise-like behavior by returning the success payload or throwing the failure value.
Follow-up: What happens without unwrapping? The caller receives the fulfilled or rejected action object and must inspect its status or payload itself.
QHow does unwrapResult handle rejectWithValue?
When the thunk calls rejectWithValue with a custom value, a rejected action carries that value as its payload. unwrapResult throws that payload when present; otherwise it throws the serialized error.
Follow-up: How can a caller handle both forms? Put unwrapResult inside try/catch and process the caught value as either the custom rejection payload or the thunk error.
Related
createAsyncThunk.unwrap()rejectWithValue