Redux Thunk如何调用柯里化的异步thunk函数？

你遇到的这个调用逻辑本质是Redux Thunk中间件的内置能力，以下是具体的原理说明：

1. listProducts的完整调用流程 #

你在配置Redux Store时应该已经注册了redux-thunk中间件，它的作用就是扩展dispatch的能力：

• 默认Redux的dispatch仅支持传入普通Action纯对象（包含type字段的对象），如果直接传入函数会抛出异常
• 当你执行dispatch(listProducts())时，首先会执行listProducts()，这个调用会直接返回你定义的async (dispatch) => { ... }异步函数
• thunk中间件会拦截所有dispatch传入的内容，判断如果是函数类型，就不会把它传递给reducer，而是直接执行这个函数。

2. thunk函数的dispatch参数来源 #

thunk中间件执行你返回的异步函数时，会自动把Store实例的dispatch、getState两个方法作为参数传入这个函数，你不需要手动传参，这就是你写的异步thunk里能直接调用dispatch发送action的原因。

thunk的核心实现逻辑非常简单，你可以参考下面的简化源码理解：

const thunk = store => next => action => {
  // 判断dispatch传入的是不是函数
  if (typeof action === 'function') {
    // 是函数就直接执行，传入dispatch和getState作为参数
    return action(store.dispatch, store.getState)
  }
  // 是普通action对象就走正常流程
  return next(action)
}

3. listProducts调用后的返回值 #

listProducts()本身会返回你定义的异步thunk函数；当这个函数被thunk中间件执行时，因为它是async修饰的异步函数，最终会返回一个Promise实例，你甚至可以基于这个返回值做后续链式操作：

useEffect(() => {
  dispatch(listProducts()).then(() => {
    // 可以在这里写异步请求完成后的额外逻辑
  })
}, [dispatch])

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