Redux: Wrapping dispatch() to Recognize Promises

Share this video with your friends

Send Tweet

We will learn how to teach dispatch() to recognize Promises so that we can move the async logic out of the components into asynchronous action creators.

Howon
Howon
~ 8 years ago

Couple of questions :)

  1. when you call receiveTodos(..), how come you don't have to wrap dispatch(receiveTodos(...))?
  2. when you do then(rawDispatch), does it do rawDispatch(response) when the promise is ready?
Jiaming
Jiaming
~ 8 years ago
  1. when you call receiveTodos(..), how come you don't have to wrap dispatch(receiveTodos(...))?

Because he passed the whole actions object into the connect function as the second argument. Since he imported the whole actions namespace into the actions object by import * as actions, the second argument, which is mapDispatchToProps, will do the dispatch wrapping for all of the exported functions in actions/index.js.

  1. when you do then(rawDispatch), does it do rawDispatch(response) when the promise is ready?

I also have problem understanding this one.

Jiaming
Jiaming
~ 8 years ago
  1. when you do then(rawDispatch), does it do rawDispatch(response) when the promise is ready?

I've figured out how this one works. When the fetchTodos actions is dispatched, it would wait for the response and build a receiveTodos action and return it as a promise. Since it's a promise, the addPromiseSupportToDispatch would chain the then(rawDispatch) at the end of it. Therefore, the rawDispatch would use the receivedTodos action returned by the previous promise as its argument and dispatch the receiveTodos action to the store.

Ningze
Ningze
~ 8 years ago

For question No.1 : You don't need to call dispatch(receiveTodos(...)) because receiveTodos(...) is called in the first then() of Promise, and the returned value (which is an action) of the method in the first then() will be automatically fed into the input parameter of the method in the second then(), which is the rawDispatch.

For question No.2: No, it will do rawDispatch(action), not the response, because the response will be converted into an action by calling receiveTodos in the first then(), see the answer to question No.1

I think you are not quite clear about how Promise works. Your questions have nothing to do with redux or react.

J. Matthew
J. Matthew
~ 5 years ago

Nice questions, @Howon. I was wondering about the first one, myself! Coming from using Redux in Angular, I'm used to having to explicitly call dispatch(<action>). I think @Jiaming answered your questions well. I had forgotten the earlier video that talked about mapDispatchToProps and how you could pass an object instead, like this code does with the actions namespace. It's very clean but hides the actual dispatch, so that can be somewhat confusing.

@Jiaming also explained the mechanics of the second question well, but I just want to clarify the syntax further:
.then(rawDispatch) = .then(actionObject => rawDispatch(actionObject))
It's just a more compact way to write the code, which is good but does have the downside of being slightly more confusing, since you're not providing a name for what's being passed through from the .then.