From 873a647ec9c45e51d30b38c10fffb4bbf535659f Mon Sep 17 00:00:00 2001 From: Ev Haus Date: Sun, 21 Jul 2024 11:50:44 -0700 Subject: [PATCH] Improve doc clarity around TypeScript and `createAsyncThunk` usage --- docs/usage/usage-with-typescript.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/usage/usage-with-typescript.md b/docs/usage/usage-with-typescript.md index de288f33d3..507bdbea95 100644 --- a/docs/usage/usage-with-typescript.md +++ b/docs/usage/usage-with-typescript.md @@ -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.