react-redux基本使用
-
两个概念:
UI组件:
不能使用任何redux的api,只负责页面的呈现,交互等容器组件:
负责与redux通信,将结果交给UI组件
-
如何创建一个容器组件---- 靠
react-redux
的connect
函数connect(mapStateToProps, mapDispatchToProps)(UI组件)
- mapStateToProps:映射状态,返回一个对象
- mapDispatchToProps:映射操作状态方法,返回一个对象;
- 简写的时候也可以是一个对象
{
方法名
:对应操作的action
}
- 简写的时候也可以是一个对象
-
备注:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
react-redux优化
- 容器组件与UI组件整合成一个文件
- 无需自己给容器组件传递store,给包裹一个 即可。
- 使用了react-redux后不用再自己检测redux中状态的改变了容器组件可以自动完成这个工作。
- mapDispatchToProps也可以简写成一个对象
- 一个组件要和redux’打交道‘要经过几个步骤:
- 定义好UI组件 — 不暴露
- 引入 connect 生成一个容器组件,并暴露,写法如下:
connect(
state => ({ key: value }), // 映射状态
{ key: xxxAction } // 映射操作状态的方法
)(UI组件)
- 在UI组件中通过
this.props.xxx
读取和操作状态
react-redux数据共享
- 定义一个person组件和count组件通过redux共享数据
- 为person组件编写:reducer、action,配置constant常量
- 重点:person的reducer和count的reducer要使用combineReducers进行合并,合并后总的状态是一个对象。
- 交给store的是一个总reducer,最后注意在组件中取出状态的时候,记得“取到位”