React Redux中action实际如何工作？相关使用疑问求解

你提到的这种() => async dispatch => {}格式的action是配合redux-thunk中间件使用的写法，两个问题解答如下：

1. dispatch参数的来源 #

这个dispatch是redux-thunk中间件主动注入的：

• Redux默认只允许 dispatch 普通对象类型的action，当你dispatch的内容是一个函数时，redux-thunk会直接拦截这个函数，把当前Redux Store的dispatch、getState方法作为参数传入这个函数，所以内层箭头函数才能拿到dispatch参数直接使用。
• 你通过connect把这个action creator关联到组件时，React Redux会自动帮你把返回的thunk函数传给dispatch触发执行，不需要你在组件中手动处理。

2. 为什么要返回函数而不是直接调用dispatch #

这种设计核心是为了支持异步、多步骤的复杂业务逻辑封装，主要优势有3点：

• 支持异步逻辑编写：比如你要加载用户数据，需要先发起接口请求，请求成功后dispatch加载成功的action，请求失败则dispatch加载失败的action，返回函数的写法可以把这一整套异步流程都封装在action creator内部，不用把异步逻辑散写在组件里。
• 支持灵活的逻辑控制：你可以在返回的函数里通过getState拿到当前Store的全量状态，做逻辑判断，比如判断用户数据已经加载过就不再重复发请求，或者根据不同状态dispatch不同的action。
• 降低组件耦合度：组件调用这个action creator的写法和调用普通同步action完全一致，不需要感知内部是同步还是异步逻辑，组件只需要触发动作即可，不用关心后续处理流程。

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