Redux 中间件触发流程-redux-thunk

88 阅读1分钟

介绍 redux-thunk 的执行流程,使用了 react-redux,要先复习怎么使用再看这个流程介绍,涉及到 bindActionCreator 没有详细描述。

这里边嵌套关系是真的恶心🤢。

  • 第零步:项目中引入 store,增加 reduxThunk 中间件

第零步.png

  • 第一步:createStore 中对中间件函数(applyMiddleware)的处理

第一步.jpg

  • 第二步:applyMiddleware 内部对传递的中间件处理

第二步.png

  • 第三步:业务组件中使用 reduxThunk 规范处理异步请求

第三步.png

  • 第四步:业务组件中请求在 reduxThunk 中处理流程

第四步.png

  • 第五步:业务组件和 reduxThunk 调用关系

第五步.png

  • 使用 react-promise 处理异步

react-promise.png

对比 react-thunkreact-promise

  • 相同点

都是派发两次 第一次派发用的是重写后的 dispatch,这个方法不回去校验对象是都是 plainObjecct 也不会校验对象的 type 属性,这次派发只是为第二次派发做准备.

  • 不同点

redux-thunk 的第二次派发是手动处理的

redux-promise 的第二次派发是自动的