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

What is the best way to insert CSS code into a custom Vue directive file?

Warning: An alert has been triggered while generating files using create-react-app

Can a composite type of numbers be created without individually mentioning each one?

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Enabling Javascript compilation while overlooking typescript errors

Triggering ngSubmit function when button is clicked inside an Ionic alert

Custom React component - DataGrid

Choosing the Right Language for AngularJS 2: TypeScript, JavaScript, or Dart?

Error: The argument provided is of type 'unknown', which cannot be assigned to a parameter of type 'string'. This issue arose when attempting to utilize JSON.parse in a TypeScript implementation

Using Typescript for AngularJS bindings with ng.IComponentController

Error encountered in Vue code, lacks default export on Editor Terminal

Guide to importing a function from a Javascript module without declaration

Enabling cookie communication between NestJS server and Next.js frontend

Tips on integrating TypeScript into JavaScript

Issue with importing MomentJS globally in TypeScript

Combining TypeScript and ReactJS with RequireJS: A guide to importing react-dom in TypeScript

Unable to utilize material tabs in this situation

I'm having trouble inputting text into my applications using React.js and TypeScript

Finding the row index in an Angular material table

What is the correct way to invoke a function from a separate file in typescript?