Redux结合thunk使用时Action Creator与Dispatch语法疑问

原理核心 #

你疑惑的dispatch参数不需要手动传入的原因，是Redux Thunk中间件在背后做了自动注入，整个流程没有任何语法魔法，完全是中间件的处理逻辑：

• 未配置Thunk时，dispatch只能接收带type字段的普通action对象，遇到函数会直接报错
• 配置Thunk后，每次调用dispatch，Thunk都会先检查传入的参数类型：
  • 如果是普通对象：直接走正常的Redux流转逻辑，传递给后续中间件和reducer
  • 如果是函数：Thunk会立即执行这个函数，并且主动把Redux store的dispatch、getState两个方法作为参数传入，不需要你手动传值

你的代码流程拆解 #

我们一步步对应你的代码走完整流程：

1. 执行productListCreator()，返回你定义的异步函数：

async(dispatch) => {  
  // 你的异步逻辑
}

此时这个异步函数还没有被执行，只是作为返回值生成。

2. 把这个返回的异步函数传入dispatch，即执行dispatch(异步函数)：
   Thunk中间件拦截到这次dispatch请求，发现传入的是函数而非普通action对象，就会主动执行这个异步函数，并且把当前store的dispatch作为第一个参数传入，你代码里异步函数接收的dispatch参数就是这么来的。

简化版Thunk实现参考 #

你可以通过Thunk的核心源码逻辑理解这个过程，它的实现不到10行：

const thunkMiddleware = store => next => action => {
  // 检查传入的action是不是函数
  if (typeof action === 'function') {
    // 是函数就执行，自动注入dispatch和getState
    return action(store.dispatch, store.getState)
  }
  // 不是函数就走正常流程
  return next(action)
}

内容的提问来源于stack exchange，提问作者pancake