Skip to content

Commit

Permalink
Improve doc clarity around TypeScript and createAsyncThunk usage
Browse files Browse the repository at this point in the history
  • Loading branch information
EvHaus committed Jul 27, 2024
1 parent 6a3de08 commit 873a647
Showing 1 changed file with 15 additions and 0 deletions.
15 changes: 15 additions & 0 deletions docs/usage/usage-with-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,21 @@ const fetchUserById = createAsyncThunk(
const lastReturnedAction = await store.dispatch(fetchUserById(3))
```

### Handling responses from async thunks

The preferred approach to handling responses from thunks is via the `unwrap` method (see [Unwrapping Result Actions](../api/createAsyncThunk.mdx/#unwrapping-result-actions).

```ts
const handleClick = async (userData) => {
try {
const result = await dispatch(updateUser(userData)).unwrap();
showToast('success', `Updated ${result.name}`)
} catch (error) {
showToast('error', `Update failed: ${error.message}`)
}
}
```

### Typing the `thunkApi` Object

The second argument to the `payloadCreator`, known as `thunkApi`, is an object containing references to the `dispatch`, `getState`, and `extra` arguments from the thunk middleware as well as a utility function called `rejectWithValue`. If you want to use these from within the `payloadCreator`, you will need to define some generic arguments, as the types for these arguments cannot be inferred. Also, as TS cannot mix explicit and inferred generic parameters, from this point on you'll have to define the `Returned` and `ThunkArg` generic parameter as well.
Expand Down

0 comments on commit 873a647

Please sign in to comment.