react–react-redux

react-redux

cnpm install react-redux -S

核心组件:
Provider 提供者 属性上通过store将数据派给容器组件
connect 用于连接容器组件与UI组件

connect() 返回一个函数,函数参数接收UI组件,返回容器组件

connect(mapStateToProps,mapDispatchToProps)(ui组件)

​ 容器组件内部帮你做了 store.subscribe() 的方法订阅
​ 状态变化 ==> 容器组件监听状态改变了 ==> 通过属性的方式传给UI组件

​ 把store.getState()的状态转化为展示组件的props使用

转化为展示组件props上的属性

const mapStateToProps = state=>{
	return state.todolist
}

​ 转化为展示组件props上的方法

const mapDispatchToProps = dispatch=>{
	return {
		a(){
			let action = actionCreators.xxx()
			dispatch(action)
		}
	}
}

or

const mapDispatchToProps = actionCreators //将所有的方法全都绑定props并且进行派发了

redux中间件

通常情况下,action只是一个对象,不能包含异步操作,这导致了很多创建action的逻辑只能写在组件中,代码量较多也不便于复用,同时对该部分代码测试的时候也比较困难,组件的业务逻辑也不清晰,使用中间件了之后,可以通过actionCreator异步编写action,这样代码就会拆分到actionCreator中,可维护性大大提高,可以方便于测试、复用,同时actionCreator还集成了异步操作中不同的action派发机制,减少编码过程中的代码量

做异步的操作在action里面去实现!需要安装redux中间件
redux-thunk redux-saga redux-promise

redux-thunk原理:

可以看出来redux-thunk最重要的思想,就是可以接受一个返回函数的action creator。如果这个action creator 返回的是一个函数,就执行它,如果不是,就按照原来的next(action)执行。
正因为这个action creator可以返回一个函数,那么就可以在这个函数中执行一些异步的操作。换言之,redux的中间件都是对store.dispatch()的增强

dispatch一个action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。


版权声明:本文为weixin_46285142原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>