Redux中接收dispatch为参数再派发action的函数运行原理疑问

语法本质 #

你看到的是连续箭头函数的柯里化写法，本质上等价于如下的普通函数写法：

function googleLogin(authData) {
  return function(dispatch) {
    return dispatch(socialLogin('google-oauth2', authData))
  }
}

这是Redux生态里Thunk中间件规定的标准异步action creator写法。

把dispatch作为参数传入的设计逻辑 #

Redux原生的普通action creator只能返回纯JS对象，只能处理同步逻辑，且dispatch方法默认只能在组件层通过useDispatch、connect等方式拿到。
Thunk中间件的设计就是为了突破这个限制：允许action creator返回一个函数，当你dispatch这个函数类型的返回值时，Thunk中间件会拦截到这个操作，主动把当前Redux Store的dispatch、getState方法作为参数传入这个函数。
这种设计的优势很明显：

• 可以在返回的函数内部编写任意异步逻辑（比如接口请求、定时器、复杂判断逻辑），逻辑执行完成后再调用传入的dispatch派发实际的action对象
• 业务逻辑可以从组件层抽离到action层封装复用，组件不需要感知内部逻辑细节，只需要执行dispatch(googleLogin(authData))即可，不需要自己维护异步流程、多action派发的逻辑
• 可以自由控制dispatch的时机和次数，比如你可以在这个函数里先派发「登录中」的action，请求接口成功后派发「登录成功」的action，请求失败就派发「登录失败」的action，所有调用googleLogin的组件都可以直接复用这套逻辑

完整执行流程 #

我们结合实际调用场景拆解运行步骤：

1. 组件层拿到Redux注入的dispatch方法，执行dispatch(googleLogin(你的auth参数))
2. 首先调用外层的googleLogin(authData)，返回内层接收dispatch作为参数的函数
3. Thunk中间件拦截到本次dispatch的内容是函数而非纯对象，就会执行这个内层函数，把Store的dispatch作为参数传入
4. 内层函数执行，调用传入的dispatch方法，派发socailLogin生成的标准action对象，后续走正常的Redux reducer更新流程

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