React Redux分派语法

Question

Let's say I have an action:

export const getInfoFor = user => {
    return dispatch => {
        dispatch( fetchApi(user) );
    }
}

const fetchApi = user => dispatch => {
    return( dispatch({type: SET_USER}) )  <--- ??
}

My questions are, how did dispatch gets passed to the return in fetchApi ? Maybe what's throwing me off is the double arrow functions in fetchApi .

The code works, but I want to understand why it works.

Answer 1

Your top-level function is intercepted by Redux-Thunk middleware and is passed dispatch, getState, customValues .

An example of the custom value ( from redux-thunk github )

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

// later
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // you can use api here
  }
}

So, in short, it comes from Redux-Thunk middleware when you return a function.

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

https://github.com/reduxjs/redux-thunk/blob/master/src/index.js ( provided by @Nicholas Tower )

Answer 2

Redux thunk is a small middleware that checks the typeof of the action that gets dispatched to the store. If the typeof action is a function , the middleware calls the function, passing dispatch as a parameter.

You can see the source code here