刚来公司的时候,对反应项目中的铛中间件的作用一直不太了解,最近有时间决定好好研究一下。鉴于本人初次写博客,并已假设读者已掌握回来的的一些基本用法;如有错误,还望指出。不胜感激!
首先简单回顾一下回来的工作流程
图画的不太好,见谅。
对于reactUI组件来说,数据的来源无外乎两种,一种是用户主动触发的动作,例如点击事件,提交表单、输入操作,另一种是组件主动的数据更新,如获取页面初始数据,子组件接受父组件的道具变化而进行更新视图操作,
如图所示,无论那种对于数据的操作,对于视图都会派发出一个行动
正如我们所知,在回来的里,每次更新后的商店都会对应着一个新的视图,而商店里面数据的更新依赖行动的触发——Store.dispatch(行动)会自执行初始化中createStore中注入的还原剂,从而计算出新的状态。
从“终极版”进口{createStore}//减速器计算状态的纯函数//initialState初始化数据//增强剂中间件
createStore(还原剂、initialState增强剂)
之前
对于组件的输入操作(如点击事件),可以将store.dispatch(行动)绑定到组件
常量存储=createStore(减速器);
const基于=({状态,someActionCreator})=比;（
& lt; ul>
{状态。地图(someState=比;
& lt;待办事项
关键={someState.someData}>//将国家注入到组件的道具里//注意,这里的状态指的是回家的管理的数据,每一个视图的状态对应着//唯一的状态;//状态的集合就是回来的管理的商店
const mapStateToProps=商店=比;({
状态:store.state
})
& # 8203;//将行动注入到组件的道具里
const mapDispatchToProps=分派=比;({
行动:状态=比;调度(actionCreators(状态)
})
& # 8203;
出口默认连接(
mapStateToProps,
mapDispatchToProps
)(基于网络的)
之前
然后组件绑定事件就可以改成这样,(actionCreators用于生成行动,参考官方链接https://redux.js.org/basics/actions)
const基于=({状态,行动})=比;（
“& lt; ul>
{状态。地图(someState=比;
& lt;待办事项
关键={someState.someData}>//未引入前的写法
让nextTodoId=0
出口const addTodo=文本=比;({
类型:“ADD_TODO”,
id: nextTodoId + +,
文本
})//引入声后
让nextTodoId=0
出口const addTodo=文本=比;({
返回异步分派=比;{//dosomething,请求
等待请求()
调度({
类型:“ADD_TODO”,
id: nextTodoId + +,
文本
})
}
})
进口{applyMiddleware, createStore} '回来的';
从“进口铛redux-thunk ';
常量存储=createStore (
减速机,
applyMiddleware(铛)
);
之前
createStore其实可以接受三个参数,第二个参数preloadedState一般作为整个应用的初始化数据,如果传入了这个参数,applyMiddleware就会被当做第三个参数处理
常量存储=createStore (
减速机,
initialState,
applyMiddleware(铛)
);
之前
中间件都要放到applyMiddleware里,如果要添加中间件,可以依次添加,但是要遵循文档定义的顺序
常量存储=createStore (
减速机,
initialState,
applyMiddleware(铛middleware1 middleware2)
);
之前
也许你会奇怪,为什么使用的时候要按照上面的写法,那我们就一起看下方法的实现
首先是createStore的参数顺序
函数createStore(减速机、preloadedState增强剂){
var _ref2;
如果(typeof preloadedState===δ堋?,typeof增强剂===ㄒ濉?{
增强剂=preloadedState;
preloadedState=定义;
}
如果(typeof强化剂!==ㄒ濉?{
如果(typeof增强器!==昂?{
把新的错误(“预期增强器是一个函数。”);
}
返回增强剂(createStore)(减速机、preloadedState);
}
如果(typeof减速器!==昂?{
把新的错误(“预计减速器是一个函数。”);
}
