react-redux基本使用

react-redux基本使用

• 两个概念：

  • UI组件： 不能使用任何redux的api,只负责页面的呈现，交互等
  • 容器组件： 负责与redux通信，将结果交给UI组件

• 如何创建一个容器组件---- 靠react-redux 的connect函数

  connect(mapStateToProps, mapDispatchToProps)(UI组件)
  1

  • mapStateToProps：映射状态，返回一个对象
  • mapDispatchToProps：映射操作状态方法，返回一个对象;
    • 简写的时候也可以是一个对象
      {
      方法名: 对应操作的action
      }

• 备注：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

react-redux优化

1. 容器组件与UI组件整合成一个文件
2. 无需自己给容器组件传递store，给包裹一个 即可。
3. 使用了react-redux后不用再自己检测redux中状态的改变了容器组件可以自动完成这个工作。
4. mapDispatchToProps也可以简写成一个对象
5. 一个组件要和redux’打交道‘要经过几个步骤：

• 定义好UI组件 — 不暴露
• 引入 connect 生成一个容器组件，并暴露，写法如下：

 connect(
   state => ({ key: value }), // 映射状态
   { key: xxxAction } // 映射操作状态的方法
 )(UI组件)
1
2
3
4

• 在UI组件中通过this.props.xxx读取和操作状态

react-redux数据共享

1. 定义一个person组件和count组件通过redux共享数据
2. 为person组件编写：reducer、action,配置constant常量
3. 重点：person的reducer和count的reducer要使用combineReducers进行合并，合并后总的状态是一个对象。
4. 交给store的是一个总reducer，最后注意在组件中取出状态的时候，记得“取到位”