react-redux 基本使用

明确两个概念

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

如何创建一个容器组件

靠 react-redux 的 connect 函数
connect(mapStateToProps, mapDispatchToProps)(UI组件)

• mapStateToProps：映射状态，返回值是一个对象
• mapDispatchToProps：映射操作状态的方法，返回值是一个对象

• 容器组件中的 store 是靠 props 传进去的，而不是在容器组件中直接引入
• mapDispatchToProps 也可以是一个对象

react-redux 优化

1. 容器组件和 UI 组件整合成一个文件
2. 无需自己给容器组件传递 store，给 <App/> 包裹一个 <Provider store={store}> 即可
3. 使用了 react-redux 后也不用在检测 redux 中的状态变化了，容器组件可以自动完成这个工作
4. mapDispatchToProps 也可以简单的写成一个对象

5. 一个组件要和 redux “打交道” 要经过以下几步

   • 定义号 UI 组件 --- 不暴露

   • 引入 connect 生成一个容器组件，并暴露，写法如下

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

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

// 目录
/*
  - src
    - containers
      - Count
        - index.jsx
*/
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createIncrementAction } from '../../redux/count_action'

class Count extdnds Component {
  add = () => {
    // 通知 redux 加 1
    this.props.jiafa(1)
  }

  render() {
    return (
      <div>
        <h2>Count：{this.props.num}</h2>
        <button onClick={this.add}>点击 + 1</button>
      </div>
    )
  }
}

export default connect(
  state => ({num: state}), // 映射状态
  {jiafa: createIncrementAction} // 映射操作状态的方法
)(Count)

react-redux 数据共享

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

• 所有变量名字要规范，尽量出发对象的简写形式
• reducers 文件夹中，编写 index.js 专门用于汇总并暴露所有的 reducer