javascript - Async dispatch in redux-toolkit - Stack Overflow

admin管理员组

文章数量:1405501

I'm using redux-tookit for state.

My action:

const updateSomething = (data: string) => async (dispatch) => {
   await user.set({ data })
   dispatch(updatedData(data))
}

In my view I want to do something like:

const dispatch = useDispatch()
await dispatch(updateSomething('Hi!'))

I'm using redux-tookit for state.

My action:

const updateSomething = (data: string) => async (dispatch) => {
   await user.set({ data })
   dispatch(updatedData(data))
}

In my view I want to do something like:

const dispatch = useDispatch()
await dispatch(updateSomething('Hi!'))

• javascript
• redux
• redux-toolkit

Share Follow asked Jun 17, 2020 at 9:26 Leorio BrahmLeorio Brahm 1111 gold badge22 silver badges22 bronze badges 4

• 1 Can you clarify your question? updateSomething appears to be a valid Redux thunk, so yes, you can dispatch it exactly as you've shown. What specific problem are you having? – markerikson Commented Jun 17, 2020 at 15:48
• updateSomething is a valid thunk, but it does not return a promise. – Leorio Brahm Commented Jun 17, 2020 at 17:33
• The thunk function is defined as async, so it will automatically return a promise. I'm afraid I still don't know what the actual question is here. Your example usage doesn't have any promise usage in it. What are you trying to do, and what specifically isn't working? – markerikson Commented Jun 17, 2020 at 18:04
• I think the question is about dispatching the action asyncronously. is there any way to do so? – Irfan wani Commented Jun 13, 2023 at 4:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Update 5 July 2021

TL;DR

If typeof store.dispatch still doesn't give you the right typing with ThunkDispatch as one of the overloaded options, you may consider manually typing it, like so: -

export type AppDispatch = ThunkDispatch<AppState, null | undefined, AnyAction> &
  Dispatch<AnyAction>;

Note: This is the correct typing with the default middleware, if you have added more middlewares you should try to figure out the possibilities.

Background

While my proposed solution (below) works in codesandbox, it doesn't work in my project, which I ported from vanilla redux to redux toolkit. Maybe some of the packages installed break the types, just a speculation but when I include redux-debounced in my codesandbox sample (link below), the type for store.dispatch is falled back to Dispatch<AnyAction>, even without including redux-debounced in middleware.

This is certainly a mystery that has to be resolved!!

---

I had the similar issue as TS, so I made a simple project in codesandbox and surprisingly it works with a minor tweak!

In my view, what TS meant is that updateSomething('Hi!') is a valid thunk created using createAsyncThunk() in redux toolkit, where dispatching the thunk should return a Promise. That's a feature in redux toolkit. But unfortunately, somehow typescript is returning AsyncThunkAction and invoking the following line:

await dispatch(updateSomething('Hi!'));

actually yields a typing error. Here's what I got in my codesandbox project:

In my case, fetchDynamicName() is a valid thunk and supposedly the type of dispatchReturn should be a Promise.

With a minor tweak found in this post, it actually works!!

All we need is to export the dispatch type of the store, like so:

export type AppDispatch = typeof store.dispatch;

and assign the type to the dispatch function before using it:

const dispatch: AppDispath = useDispatch();

And voilà! See the screenshot below:

You can take a look at my codesandbox project at https://codesandbox.io/s/fast-cdn-08vpu?file=/src/App.tsx.

本文标签： javascriptAsync dispatch in reduxtoolkitStack Overflow