Using the AppDispatch type in Redux async thunk: A comprehensive guide

Question

Using the AppDispatch type in Redux async thunk: A comprehensive guide

While working with my Redux async thunks, I encountered a situation where I needed to utilize the AppDispatch type as outlined in this resource: https://redux.js.org/recipes/usage-with-typescript

Following the guidelines provided here: https://redux.js.org/recipes/usage-with-typescript#typing-createasyncthunk

However, incorporating the AppDispatch type within my custom ThunkApiConfig type (MyThunkApiConfig in the code example) resulted in a circular reference issue demonstrated in this example: https://codesandbox.io/s/focused-joliot-ho45h?file=/src/usersSlice.ts:

'dispatch' is referenced directly or indirectly in its own type annotation.

This dilemma arises from the circular dependency between the dispatch type and the used thunks. I am seeking advice on how to effectively implement AppDispatch within the async thunk functionality. Any insights would be greatly appreciated!

typescript redux redux-thunk redux-toolkit

Answer 1

Answer №1

Using AppDispatch in your MyThunkApiConfig type is perfectly fine. The issue arises when this is combined with defining the slice as a function of the async action, creating an unwanted coupling between slice types and dispatch types.

If the reducer is usersSlice.reducer, there is no problem. This setup utilizes the updateUser async thunk which relies on typed dispatch. However, the slice type remains independent of the dispatch type, focusing solely on state and actions.

In contrast, using MyThunkApiConfig in createAsyncSlice leads to a circular dependency between store and slice types.

The concept of passing the updateUser async thunk through a function instead of directly seems unclear. The simple solution would be to avoid doing so.

If you wish to directly assign the type for

AppDispatch</code, it is possible but not recommended due to its complexity and reliance on generic type parameters.</p>
<pre><code>export type RootState = { users: UsersState }
export type AppDispatch = Dispatch<AnyAction> & ThunkDispatch<RootState, null, AnyAction>

In your example, omitting MyThunkApiConfig altogether is viable. Generics can be dropped from updateUser as they will default to <User, void, {}>. Typing the slice argument as

asyncThunk: AsyncThunk<User, void, {}>

resolves the circular typings issue.

Answer 2

Using AppDispatch in your MyThunkApiConfig type is perfectly fine. The issue arises when this is combined with defining the slice as a function of the async action, creating an unwanted coupling between slice types and dispatch types.

If the reducer is usersSlice.reducer, there is no problem. This setup utilizes the updateUser async thunk which relies on typed dispatch. However, the slice type remains independent of the dispatch type, focusing solely on state and actions.

In contrast, using MyThunkApiConfig in createAsyncSlice leads to a circular dependency between store and slice types.

The concept of passing the updateUser async thunk through a function instead of directly seems unclear. The simple solution would be to avoid doing so.

If you wish to directly assign the type for

AppDispatch</code, it is possible but not recommended due to its complexity and reliance on generic type parameters.</p>
<pre><code>export type RootState = { users: UsersState }
export type AppDispatch = Dispatch<AnyAction> & ThunkDispatch<RootState, null, AnyAction>

In your example, omitting MyThunkApiConfig altogether is viable. Generics can be dropped from updateUser as they will default to <User, void, {}>. Typing the slice argument as

asyncThunk: AsyncThunk<User, void, {}>

resolves the circular typings issue.

Using the AppDispatch type in Redux async thunk: A comprehensive guide

Answer №1

Similar questions

Can an attribute be assigned to an Angular host element without specifying a value?

elimination of nonexistent object

What methods does Angular use to determine the parameter types of a constructor?

Tips for customizing the appearance of a redux-tooltip

Typescript's ability to have Enums with dynamic keys

gather and handle data from the shared interface between different parts

Is it possible to place Angular Material components using code?

Is there a way to create a TypeScript function that can accept both mutable and immutable arrays as arguments?

Creating efficient React components with TypeScript and leveraging generic props

When no values are passed to props in Vue.js, set them to empty

Utilizing References in React Components

Unable to retrieve this information within an anonymous function

Retrieving the Final Value from an Observable in Angular 8

Attempt the HTTP request again only for specific status codes

Guide to implementing ES2022 modules within an extension

Is there a way for me to add a clickable link within a tooltip?

Can you explain the significance of the colon in this context?

When implementing a TypeScript interface, there is no method parameter checking performed

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value

Trouble arises when trying to test an Angular service that relies on abstract class dependencies