redux中间件之redux-thunk学习记录

1、redux-thunk

允许我们在redux工作流里的action中进行异步操作获取数据。在actionCreators文件中定义一个返回函数的action。返回的函数里可接收一个dispatch参数。使用redux-thunk后,action可以是一个函数。Middleware是指dispatch和store之间,可以理解为对dispatch方法的封装和升级。
在这里插入图片描述

获取到数据后,发起 action→dispatch→store→reducer→store→component的工作流程,进行组件数据更新。

2、redux-thunk 的安装 :npm install redux-thunk

3、redux-thunk与 redux-devtools的共存:

两者皆为redux的中间件(applyMiddleware)。
a.从redux中引入applyMiddleware和compose
b.从redux-thunk中引入 thunk
c.定义一个composeEnhancers
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
详见:https://github.com/zalmoxisus/redux-devtools-extension
d.在createStore的第二个参数中执行composeEnhancers(applyMiddleware(thunk))
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_39786582/article/details/83575462