How does react redux promise middleware send the resulting action to the dispatch?

Question

I'm trying to learn about middleware for promises through the react redux docs but don't understand the then part below:

const vanillaPromise = store => next => action => {
  if (typeof action.then !== 'function') {
    return next(action)
  }

  return Promise.resolve(action).then(store.dispatch)
}

How does the then know what to dispatch? The action wasn't passed in as an argument like

return Promise.resolve(action).then(function (action) {store.dispatch(action})

so I don't understand how dispatch receives the action.

Answer 1

I hope I can help with this explanation.

lets look at what you are familiar with:

return Promise.resolve(action)
    .then(function (action) { store.dispatch(action)} )

You see this part:

function (action) { store.dispatch(action)} 

That is just a function waiting to be passed the "action" property.

Now, when we look at what you are having issues wrapping your brain around is this:

return Promise.resolve(action)
  .then(store.dispatch) // <--- this part

the "dispatch" is just a function, and it is expecting, in this case, an argument. Most likely, an object - like so:

store.dispatch({ type: 'MY_ACTION_TYPE' })}

now, you "could" wrap it in a closure, like so, and it will look familiar:

.then( (action) => {
   store.dispatch(action)
})

but, do we really need to "wrap" it in an anonymous function? Not really, so we just can put: store.dispatch, and it is function "waiting" to be passed the argument from the return of the promise. think of it like this:

 var MultiplyByTwo = (x) => x * 2

 Promise.resolve(5).then(MultiplyByTwo) 
// see here, this function is gonna be called with the resolution with the 5

when we examine the function "MultipleByTwo" -- it has that familiar signature you know about: (x) => x * 2

If we just remove the function name, its the same thing:

Promise.resolve(5).then((x) => x * 2)

Note: You see that resolve(5) --> think of that resolve.then as a chain, or a "handoff". When we "resolve(5)", we are passing that value "5" onward into ".then". Now remember, that 5 value could be anything... a primitive, 5 in this case, an object {TYPE: "WHATEVER"}, a function etc.. it just hands off.. Like, "Hey '.then', here is my value...."

resolve(5).then(myfunction)
        |                ^
        |__>__>__>__>__>_|

It is important to understand that "myFunction" is this example above or in our multiplyByTwo or even that store.dispatch example.. they are ALL expecting a passing argument(s).

multiplyByTwo(x) <-- expecting one argument

or your function might not declare it within the function signature BUT it will inside the body, ala..

myFunction() {
   const args = Array.from(arguments) // we grab the arguments
}

or hoping for any number of arguments

myOtherFunction(...args)

But yes -- those functions ARE expecting some input from the resolution to act on. There might be cases you don't care about the returned value, if any, you just want to have some flow control... do this, "THEN" that..

I hope that was helpful and I hope I actually answered your question. If not, let me know.