主页

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 组件编写:reduceraction,配置 constant 常量
  3. 重点:Person 的 reducerCountReducer 要使用 combineReducers 进行合并,合并后的总状态是一个对象
  4. 交给 store 的是总 reducer,最后注意取出状态的时候,记得 “取到位”
  • 所有变量名字要规范,尽量出发对象的简写形式
  • reducers 文件夹中,编写 index.js 专门用于汇总并暴露所有的 reducer

React

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0

目录

来自 《React-react-redux》
评论

Joe

博主很懒,啥都没有
175 文章数
14 评论量
3 分类数
178 页面数
已在风雨中度过 1年61天10小时46分