08_React redux

一、理解

1、学习文档

1、英文文档：https://redux.js.org/
2、中文文档：http://www.redux.org.cn/

2、redux 是什么吗

1、redux 是一个专门用于做状态管理的 JS 库（不是 react 插件库）
2、它可以用在 react、angular、vue 等项目中，但基本与 react 配合使用
3、作用：集中式管理 react 应用中多个组件共享的状态

3、什么情况下需要使用 redux

1、某个组件的状态，需要让其他组件可以随时拿到（共享）
2、一个组件需要改变另一个组件的状态（通信）
3、总体原则：能不用就不用，如果不用比较吃力才考虑使用

4、redux 工作流程

将公共的数据给到 redux，

5、react-redux 模型图

1、所有的 UI 组件都应该包裹一个容器组件，他们是父子关系。
2、容器组件时真正和 redux 打交道的，里面可以随意的使用 redux 的 api
3、UI 组件中不能使用任何 redux 的 api
4、容器组件会传给 UI 组件：
（1）redux 中所保存的状态
（2）用于操作状态的方法
5、备注：容器给 UI 传递：状态（这里的状态是 redux 中的状态）、操作状态的方法，均通过 props 传递

二、redux 的三个核心概念

1、action

1、动作的对象
2、包含 2 个属性：
type： 标识属性，值为字符串，唯一，必要属性
data： 数据属性，值类型任意，可选属性
3、例子：

{type:'ADD_STUDENT',data:{name: 'Tom', age:18}}

action
如果是 Object 的一般对象就是 同步 action
如果值是 function 的对象就是 异步 action

2、reducer

1、用于初始化状态、加工状态
2、加工时，根据旧的 state 和 action，产生新的 state 的纯函数

3、store

1、将 state、action、reducer 联系在一起的对象
2、如何得到此对象？
1）import {createStore} from “redux”
2）import reducer from “./reducer”
3）const store = createStore(reducer)
3、此对象的功能？
1） getState()：得到 state
2）dispatch(action)：分发 action，触发 reducer 调用，产生新的 state
3）subscribe(listener)：注册监听，当产生了新的 state 时，自动调用

三、redux 的核心 API

1、getState()

获取状态

2、dispatch()

分发

四、使用 redux 编写应用

求和应用
展示求和，进行 加、减、结果为奇数加、异步加 运算

1、求和案例_redux 精简版

1.1 去除 Count 组件自身的状态

1.2 src 下建立

-redux
-store.js
-count_reducer.js

1.3 store.js

1.3.1 引入 redux 中的 createStore 函数，创建一个 store
1.3.2 createStore 调用时要传入一个为其服务的 reducer
1.3.3 记得暴露 store 对象

1.4 count_reducer.js

1.4.1 reducer 的本质是一个函数，接收：preState，action ，返回加工后的状态
1.4.2 reducer 有两个作用：初始化状态，加工状态
1.4.3 reducer 被第一次调用时，是 store 自动触发的：
传递的 preState 是 undefined
传递的 action 是 {type: ‘@@redux/INITn.j.9.n.r.k’}

1.5 在 index.js 中检测 store 中状态的改变，一旦发生改变重新渲染

备注：redux 只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写

2、求和案例_redux 完整版

新增文件
1、count_action.js 专门用于 创建 action 对象
2、constant.js 放置由于编码疏忽写错 action 中的 type

3、求和案例_redux 异步 action 版

1、明确：延迟的动作不想交给组件自身，想交给 action
2、何时需要异步 action：想要状态进行操作，但是具体的数据靠异步任务返回（非必须）
3、具体编码：
3.1 yarn add redux-thunk， 并配置在 store 中
3.2 创建 action 的函数不再返回一般对象，而是一个函数，该函数中写异步任务
3.3 异步任务有结果后，分发一个同步的 action 去真正操作数据
4、备注：异步 action 不是必须要写的，完全可以自己等待异步任务的结果返回了再去分发同步 action

4、求和案例_react-redux 基本使用

4.1 明确两个概念

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

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

connect(mapStateToProps,mapDisapatchToProps)(UI 组件)
mapStateToProps： 映射状态，返回值是一个对象
mapDisapatchToProps：映射操作状态的方法，返回值是一个对象

容器组件的写法：

// 容器组件 react-redux

// 引入Count 的 UI 组件
import CountUI from '../../components/Count'
// 引入 action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction,
} from '../../redux/count_action'

// 引入 connect 用于连接 UI 组件与 redux
import { connect } from 'react-redux'

/**
 * 1、mapStateToProps 函数返回的是一个对象；
 * 2、返回的对象中的 key 就作为传递给 UI 组件 props 的key， value就作为传递给 UI 组件 props 的value
 * 3、mapStateToProps 用于传递状态
 */
// mapStateToProps 函数的返回值作为状态传递给了 UI 组件
// 返回的对象中的 key 就作为传递给 UI 组件 props 的key， value就作为传递给 UI 组件 props 的value -- 状态
const mapStateToProps = (state) => {
  return {
    count: state,
  }
}

// mapDisapatchToProps 函数返回的对象中的 key 就作为传递给 UI 组件 props 的key， value就作为传递给 UI 组件 props 的value -- 操作状态的方法
const mapDisapatchToProps = (dispatch) => {
  return {
    jia: (data) => {
      // 通知 redux 执行加法
      dispatch(createIncrementAction(data))
    },
    jian: (data) => {
      // 通知 redux 执行加法
      dispatch(createDecrementAction(data))
    },
    jiaAsync: (data) => {
      // 通知 redux 执行加法
      dispatch(createIncrementAsyncAction(data, 500))
    },
  }
}

// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect(mapStateToProps, mapDisapatchToProps)(CountUI)

UI 组件的写法：

import React, { Component } from 'react'
export default class CountUI extends Component {
  // 加法
  increment = () => {
    const { value } = this.selectNo
    this.props.jia(value * 1)
  }
  // 减法
  decrement = () => {
    const { value } = this.selectNo
    this.props.jian(value * 1)
  }
  // 当前求和为奇数再加
  incrementIfOdd = () => {
    let { count } = this.props
    if (count % 2 !== 0) {
      this.increment()
    }
  }
  //异步加
  incrementAsync = () => {
    const { value } = this.selectNo
    this.props.jiaAsync(value * 1)
  }
  render() {
    console.log('props--->', this.props)
    return (
      <div>
        <h1>当前求和为：{this.props.count}</h1>
        <select
          ref={(c) => {
            this.selectNo = c
          }}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;&nbsp;
        <button onClick={this.increment}>加</button> &nbsp;&nbsp;
        <button onClick={this.decrement}>减</button>&nbsp;&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
        &nbsp;&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

4.3 备注 1：容器组件中的 store 是靠 props 传递的，而不是容器组件中直接引入 store

4.4 备注 2：mapDispatchToProps 也可以是一个对象

react-redux 会将 action 进行分发，不再需要自己调用 dispatch

容器组件(自带监测功能)的优化写法：

// 容器组件 react-redux

// 引入Count 的 UI 组件
import CountUI from '../../components/Count'
// 引入 action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction,
} from '../../redux/count_action'

// 引入 connect 用于连接 UI 组件与 redux
import { connect } from 'react-redux'

// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect(
  (state) => ({ count: state }),
  /*
  // mapDispatchToProps 的一般写法
  dispatch=>{
    return  {
      jia: (data) =>{
          // 通知 redux 执行加法
        dispatch(createIncrementAction(data))
      },
      jian: (data) =>{
        // 通知 redux 执行加法
        dispatch(createDecrementAction(data))
      },
      jiaAsync: (data) =>{
        // 通知 redux 执行加法
        dispatch(createIncrementAsyncAction(data, 500))
      },
    }
  }
  */
  // mapDispatchToProps 的简写，
  {
    jia: createIncrementAction, // react-redux 会将action进行分发，不再需要自己调用 dispatch
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  },
)(CountUI)

容器组件里面的 store 从哪里得到的？——

5、求和案例_react-redux 优化

1、容器组件和 UI 组件混成一个文件
2、无需自己给容器组件传递 store，给 包裹一个 Provider store={store} 即可
3、使用了 react-redux 后也不用自己监测 redux 中状态的改变了，容器组件可以自动完成这个工作
4、mapDispatchToProps 也可以简单的写成一个对象
5、一个组件要和 redux “打交道”要警告过哪几步？
（1）定义 UI 组件 — 不暴露
（2）引入 connect 生成一个容器组件并暴露，写法如下：

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

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

6、多组件共享数据_redux 管理

1、定义一个 Person 组件，和 Count 组件通过 redux 共享数据
2、为 Person 组件编写：reducer、action ，配置 constant 常量

3、重点：Person 的 reducer 和 Count 的 reducer 要使用 combineReducers 进行合并，合并后的总状态时一个对象！！！
4、交给 store 的时总 reducer，最后注意在组件中取出状态的时候，记得“取到位”

export default connect(
  (state) => ({
    sum: state.sum,
    personList: state.personList,
  }),
  {
    jia: createIncrementAction,
  },
)(Count)

Count 组件的 action

/**
 * 该文件专门为 Count 组件生成 action 对象
 */
import { INCREMENT, DECREMENT } from '../constant'
export const createIncrementAction = (data) => {
  return {
    type: INCREMENT,
    data,
  }
}
// 同步 action，返回一般对象。同步 action 的值为 Object 类型的一般对象
export const createDecrementAction = (data) => ({
  type: DECREMENT,
  data,
})
// 异步action ，返回 函数。 异步action 就是指 action 的值为函数。异步action 中一般都会调用同步 action
export const createIncrementAsyncAction = (data, time) => {
  return (dispatch) => {
    console.log(dispatch, 'dispatch')
    setTimeout(() => {
      dispatch(createIncrementAction(data))
    }, time)
  }
}
// 数组和数字都不能够开启 异步任务，所以不会定义这些类型为异步 action

7、纯函数

1、一类特别的函数：只要是同样的输入（实参），必定得到同样的输出（返回）
2、必须遵守以下一些约束
（1）不得改参数数据
（2）不会产生任何副作用，例如网络请求，输入和输出设备
（3）不能调用 Date.now() 或者 Math.random() 等不纯的方法
3、redux 的 reducer 函数必须是一个纯函数（不能写 unshift 等方法添加数据，如果 preState 被改写 reducer 就不纯了，页面也不会更新）！！！

8、Redux 开发者工具 redux-devtool

1、安装开发者工具
2、安装依赖（配合插件使用）
npm i redux-devtools-extension
3、store 中引入

import { composeWithDevTools } from 'redux-devtools-extension'
export default createStore(
  allReducer,
  composeWithDevTools(applyMiddleware(thunk)),
)

store.js 完整代码

/**
 * 该文件专门用于暴露一个store 对象，整个应用只有一个 store 对象
 */
// 引入createStore，专门用于创建 redux 中最为核心的是store 对象
import { applyMiddleware, createStore, combineReducers } from 'redux'

// 引入 redux-thunk 用于支持异步action
import thunk from 'redux-thunk'

// 引入为 Count 组件服务的reducer
import countReducer from './reducers/count'
import personReducer from './reducers/person'
import { composeWithDevTools } from 'redux-devtools-extension'

// 汇总所有的 reducer 变成一个总的 reducer
const allReducer = combineReducers({
  sum: countReducer,
  personList: personReducer,
})

export default createStore(
  allReducer,
  composeWithDevTools(applyMiddleware(thunk)),
)

五、项目打包运行

npm run build

使用 serve 插件可以在本地开启一个本地服务器，使用命令 serve 就可以启动当前的文件夹
npm i serve -g

项目资源文件