五、集中状态管理-Redux

Redux应用场景

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

Redux使用原则

能不用就不用

Redux三大原则

1. 单一数据源
   整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
2. State 是只读的
   唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
3. 使用纯函数来执行修改
   为了描述 action 如何改变 state tree ，你需要编写 reducers。

Redux三大核心概念

• action：动作的对象包含两个属性
  1. type ：标识属性，值为字符串，唯一必要属性
  2. data ： 数据属性，值任意类型，可选属性
  3. 例子：{type:'ADD_STUDENT', data: {name:'tom',age:18}}
• reducer：用于初始化状态、加工状态
  加工时根据旧的state和action，产生新的state的纯函数
• store：将state、action 、reducer联系在一起的对象

Redux工作流程

使用一个简易的计算器说明redux

//Count.jsx



import React, { Component } from "react";
// 引入store
import { store } from "../../redux/store";
//引入action
import { createIncrementAction, createDecrementAction } from '../../redux/count_action' 


class Count extends Component {
  // const {} = store.getState()
  state = {}
  componentDidMount(){
    // 监测redux中的状态变化，变化就调用render
    store.subscribe(() => {
      this.setState({})
    })
  }

  increment = () => {
    const {value} = this.selectNumber
    store.dispatch(createIncrementAction(Number(value)))

  }
  decrement = () => {
    const {value} = this.selectNumber
    store.dispatch(createDecrementAction(Number(value)))
  }
  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</option>
          <option value="4">4</option>
        </select>&nbsp;
        <button onClick = {this.increment}> + </button>&nbsp;
        <button onClick = {this.decrement}> - </button>
      </div>
    );
  }
}

export default Count;

1、Store

Store 有以下职责：

1. 维持应用的 state；
2. 提供 getState() 方法获取 state；
3. 提供 dispatch(action) 方法更新 state；
4. 通过 subscribe(listener) 注册监听器;

强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

//store.js

import {createStore} from 'redux'
import {countReducer} from './count_reducer'
//使用createStore根据reducer创建一个store数据仓库
const store = createStore(countReducer)

export {
  store
}

发起action
store.dispatch(createIncrementAction(data))

2、Action

//count_action.js
/* 
 该文件专门为Count组件生成action对象
*/
import {
  INCREMENT,
  DECREMENT
} from './constant'



function createIncrementAction(data) {
  return {
    type: INCREMENT,
    data
  }
}
// 箭头函数形式
// const createIncrementAction = data => ({
//   type: INCREMENT,
//   data
// })


function createDecrementAction(data) {
  return {
    type: DECREMENT,
    data
  }
}

export {
  createIncrementAction,
  createDecrementAction
}

3、Reducers

//count_reducer.js
/* 
  1.该文件是用于创建一个为Count组件服务的reducer，reducer本质是一个函数
  2.reducer函数会接收到两个参数，分别为之前的状态和动作对象
*/
import {
  INCREMENT,
  DECREMENT
} from './constant'

const initState = 0

function countReducer(prevState = initState, action) {
  const {
    type,
    data
  } = action
  switch (type) {
    case INCREMENT:
      return prevState + data
    case DECREMENT:
      return prevState - data
    default:
      return prevState
  }
}


export {
  countReducer
}

通常为了避免错误，会有一个存放常量的文件

//constant.js

/* 
定义action对象中type类型的常量值
*/
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

export {
  INCREMENT,
  DECREMENT
}