Redux: dispatch function that returns a promise instead

[elquimista]

Do you want to request a feature or report a bug?

I want to request a feature.

What is the current behavior?

store.dispatch returns something that is not a promise.

What is the expected behavior?

To make store.dispatch promisified (a function that returns a promise)

Which versions of Redux, and which browser and OS are affected by this issue? Did this work in previous versions of Redux?

I think making store.dispatch promisified won't break any compatibility unless we are doing something with its returned value.

Origin:

There are many cases where we have to make multiple dispatch calls in a single context. For some cases, it's totally fine to make these multiple dispatches in parallel, whereas in some cases, these dispatches can be in dependency chain (e.g., a dispatch would depend on value that's modified by a previous dispatch call).

By making store.dispatch return a promise, we can just put a await in front of calling it.

[timdorr]

This is something you'd handle with a middleware. redux-promise is a popular implementation of the pattern.

[elquimista]

@timdorr Can you please be more specific about how to use redux-promise? I don't think it solves my case. Looks like it mentions about an action creator that returns a promise, but I want dispatch function itself to return a promise.

[timdorr]

You can dispatch a Promise using it. If you want to return a Promise, you would implement your own middleware: https://redux.js.org/advanced/middleware

[markerikson]

By default, store.dispatch returns whatever you passed in (ie, the action object). Middleware can alter that by returning something else instead. If you need to have dispatch return a promise, you can do so by returning a promise from a thunk action creator (which itself is possible because of the thunk middleware), or use some other middleware that returns a promise for your use case.

[elquimista]

I see. I thought about using middleware too, but was not sure how to do so. Thanks for confirmation.

[zeitamin]

I couldn't achieve something like this

dispatch(action()).then(()=>{
 // some other logic
})

dispatch is always undefined whatever is returned from the middleware, could you please provide an example?

[markerikson]

@zeitamin : please see the redux-thunk docs:

https://github.com/reduxjs/redux-thunk/#composition