关于Redux
2017-06-09 本文已影响122人
因幡白兔
简介
Redux是一个状态集中管理库,说的更通俗易懂点Redux是用来统一管理state
为什么需要Redux?
就我目前的理解来说主要是因为有时候需要状态共享或者改变其它组件的状态(也可以说复杂度很高的
APP需要用到Redux来处理异步事件等问题)
根据官方文档中提到的总结如下:
不需要使用Redux(一位Q友推荐使用mobx):
1.整体 UI 很简单,没有太多交互
2.不需要与服务器进行大量交互,也没有使用 WebSocket
3.视图层只从单一来源获取数据
需要使用Redux:
用户的交互复杂
1.根据层级用户划分功能
2.多个用户之间协作
3.与服务器大量交互,或使用了 WebSocket
4.视图层需要从多个来源获取数据
5.遇到 React 无法解决的问题
Redux是如何实现状态管理的?
通过store、action、reducer这三者进行状态管理
下面简单介绍下这三者(关于三者的写法大家可以参照下Redux中文网的例子):
Action:行为.它本质上是JavaScript的普通对象,它描述的是“做了什么”,作用就是将我们更新
组件状态的每个动作抽象为一个行为,它有一个必要的参数type,用于给Action取名字
Reducer 监听器.只有它可以改变状态,它是一个纯函数,因为不能修改state,必须生成一个新的
state,所以根据传入的Action行为和旧的state对象,返回一个新的state,然后组件会根据state
刷新(在default情况下,必须返回旧的state)
Store 状态树.当Reducer返回新的state以后Redux就往store里面存储state
我在项目中使用到的Redux相关知识:
connect()用于获取一个与store连接的新组件
ex: export default connect(mapStateToProps, mapDispatchToProps)(PersonalIndex);
mapStateToProps :接收整个store的state作为props并返回对象
ex:function mapStateToProps(state) {
return {
user: state.buz.user
}
}
mapDispatchToProps:负责返回一个 dispatchProps,dispatchProps是actionCreator的
key和dispatch(action)的组合
ex:function mapDispatchToProps(dispatch) {
// return bindActionCreators({...actions}, dispatch);
return {};
}
tips:bindActionCreators:将Actions和dispatch组合生成mapDispatchToProps需要的内容
参考
今天就粗略的记录下Redux入门知识,以后会更新更加全面的知识-2017-6-9-0:21