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.
Couple of questions :)
receiveTodos(..)
, how come you don't have to wrap dispatch(receiveTodos(...))
?then(rawDispatch)
, does it do rawDispatch(response)
when the promise is ready?
- when you call
receiveTodos(..)
, how come you don't have to wrapdispatch(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
.
- when you do
then(rawDispatch)
, does it dorawDispatch(response)
when the promise is ready?
I also have problem understanding this one.
- when you do
then(rawDispatch)
, does it dorawDispatch(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.
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.
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
.