React Redux代码逻辑疑问：dispatch作用与异步Action Creator语法解析

1. 组件中dispatch调用如何触发Action-Creator文件中的函数 #

这套代码是典型的Redux + Redux Thunk 中间件的开发模式，链路逻辑如下：

• 你在React组件中已经提前导入了Action-Creator文件里定义的函数
• Redux默认只支持dispatch普通的JS对象（也就是你第三个文件里定义的带type字段的Action），加了Redux Thunk中间件后，它会在所有dispatch操作前做拦截判断：如果发现你dispatch的是一个函数而不是普通对象，就会自动执行这个函数，并且把Redux store自带的dispatch、getState方法作为参数传入这个函数，这就实现了组件侧的dispatch到Action-Creator函数的关联。

2. const variablename = (data) => async(dispatch) => {} 语法含义 #

这是柯里化写法的高阶函数，分层拆解如下：

• 第一层函数接收你从组件中传入的业务参数data，比如表单数据、查询ID等自定义传参
• 第二层是异步函数，就是Redux Thunk中间件识别到后自动执行的函数，中间件会把store的dispatch方法作为参数注入进来。你可以在这个函数里写任意异步逻辑（调用接口、读本地存储、定时器等），等异步逻辑执行完成后，再手动dispatch第三个文件里定义的纯对象Action，这个Action后续就会流入Reducer完成状态更新。

完整流程串讲 #

1. 组件触发用户操作，执行dispatch(导入的ActionCreator(业务参数))
2. Redux Thunk拦截到dispatch的内容为函数，执行该函数并传入dispatch
3. ActionCreator内的异步逻辑执行（比如请求后端接口获取数据）
4. 异步结束后，dispatch带type和payload的纯对象Action
5. Redux将Action传递给Reducer，Reducer匹配type后计算返回新的状态
6. 订阅了对应状态的React组件自动重新渲染

内容的提问来源于stack exchange，提问作者ibcoder.eth