25-useReducer

useReducer

• 可以看成是useState的进化版本,集成式的处理数据

import { useReducer } from "react";
// useReducer: 是useState的进化版本

const PLUS = 'PLUS';
const MINUS = 'MINUS';
/**
 * 集成性非常低的一种操作方式
 * setNum(num => num + 1)
 * setNum(num => num - 1)
 * 如果一个状态的操作方式有多重的情况下,useReducer是最好的选择
 */
function UseReducer() {
  function reducer(state, action) {
    switch (action.type) {
      case PLUS:
        return state + 1;
      case MINUS:
        return state - 1;
      default:
        return state;
    }
  }
  /**
   * dispatch({type: 'plus'}) => setNum(num => num + 1)
   * dispatch({type: 'minus'}) => setNum(num => num - 1)
   * reducer => dispatch需要的方法集合
   * 0 => initialState 初始值
   */
  const [num, dispatch] = useReducer(reducer, 0);
  return <div>
    <h1>{ num }</h1>
    <button onClick={() => dispatch({type: PLUS})}>+</button>
    <button onClick={() => dispatch({type: MINUS})}>-</button>
  </div>;
}

export default UseReducer;

示意图

/*
type <--- dispatch <--- useReducer
|                           |
|                           |
PLUS + 1                    |
MINUS - 1 <-------- num <----
|
|/
reducer
*/