【React】redux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数

1. redux理解

1.1. 相关文档

中文文档: http://www.redux.org.cn/

Github: https://github.com/reactjs/redux

先把它装上

npm i redux

1.2. redux是什么

之前学过vuex，这两个差不多，都是状态管理用的

【Vue】Vuex管理状态入门到实战 - 计数器demo - todoList项目 - 组件间共享数据 - State - Mutation - Action - Getter

【Vue】vuex - 状态自管理应用 - state - view - actions

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

1.3. 什么情况下需要使用redux

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

1.4. redux工作流程

2. redux的三个核心概念

2.1. action

1. 动作的对象
2. 包含 2 个属性
   • type：标识属性, 值为字符串, 唯一, 必要属性
   • data：数据属性, 值类型任意, 可选属性
3. 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

2.2. reducer

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

2.3. store

1. 将state、action、reducer联系在一起的对象

2. 如何得到此对象?

   1. import {createStore} from 'redux'
   2. import reducer from './reducers'
   3. const store = createStore(reducer)

3. 此对象的功能?

   1. getState(): 得到state
   2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
   3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

3. API

3.1. createStore()

作用：创建包含指定reducer的store对象

3.2. store对象

1. 作用: redux库最核心的管理对象
2. 它内部维护着:
   1. state
   2. reducer
3. 核心方法:
   1. getState()
   2. dispatch(action)
   3. subscribe(listener)
4. 具体编码:
   1. store.getState()
   2. store.dispatch({type:'INCREMENT', number})
   3. store.subscribe(render)

3.3. applyMiddleware()

作用：应用上基于redux的中间件(插件库)

3.4. combineReducers()

作用：合并多个reducer函数

4. 使用redux编写应用

4.1 效果

4.2 实现

redux/store.js

该文件专门用于暴露一个store对象，整个应用只有一个store对象

// 引入createStore，专门用于创建redux中最为核心的store对象
import {
    createStore } from "redux";
// 引入为Count组件服务的reducer
import countReducer from "./count_reducer.js";
// 暴露store
export default createStore(countReducer);

redux/count_reducer.js

该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)

import {
   INCREMENT,DECREMENT} from './constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
   
  // console.log(preState);
  //从action对象中获取：type、data
  const {
   type,data} = action
  //根据type决定如何加工数据
  switch (type) {
   
    case INCREMENT: //如果是加
      return preState + data
    case DECREMENT: //若果是减
      return preState - data
    default:
      return preState
  }
}

redux/count_action.js

该文件专门为Count组件生成action对象

import {
   INCREMENT,DECREMENT} from './constant'

export const createIncrementAction = data => ({
   type:INCREMENT,data})
export const createDecrementAction = data => ({
   type:DECREMENT,data})

redux/constant.js

该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

Count/index.jsx

import React, {
    Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {
   createIncrementAction,createDecrementAction} from '../../redux/count_action'

export default class Count extends Component {
   

  /* componentDidMount(){
    //检测redux中状态的变化，只要变化，就调用render
    store.subscribe(()=>{
      this.setState({})
    })
  } */

  //加法
  increment = ()=>{
   
    const {
   value} = this.selectNumber
    store.dispatch(createIncrementAction(value*1))
  }
  //减法
  decrement = ()=>{
   
    const {
   value} = this.selectNumber
    store.dispatch(createDecrementAction(value*1))
  }
  //奇数再加
  incrementIfOdd = ()=>{
   
    const {
   value} = this.selectNumber
    const count = store.getState()
    if(count % 2 !== 0){
   
      store.dispatch(createIncrementAction(value*1))
    }
  }
  //异步加
  incrementAsync = ()=>{
   
    const {
   value} = this.selectNumber
    setTimeout(()=>{
   
      store.dispatch(createIncrementAction(value*1))
    },500)
  }

  render() {
   
    return (
      <div>
        <h1>当前求和为：{
   store.getState()}</h1>
        <select ref={
   c => this.selectNumber = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3