react Hooks之useReducer

一、比较几种状态管理的方法

useReducer、useState、redux都是用来管理状态的。

区别：useState一次只能管理一个状态，且只能改变state的值，不能进行多个状态管理以及更复杂的业务逻辑，所以我们可以用useReducer代替useState，同时useReducer又比redux使用起来更简洁，更轻量级。

二、useReducer的使用

步骤：

①定义初始状态initState

②创建reducer

③使用reducer

实例：

import React, { Component, useState, useEffect, useReducer } from 'react';

export default function ReducerDemo() {
    //  1. 定义initState和reducer,可以管理多个状态(这里是count和uname)
    const initState = { count: 0, uname: 'Mike' }
    const reducer = (state, action) => {
        // payload默认值为1，表示如果没有传入payload参数，则设置为1
        const { type, payload = 1 } = action
        switch (type) {
            // case1和2操作state
            case 'increment':
                return { ...state, count: state.count + payload }
                break;
            case 'decrement':
                return { ...state, count: state.count - 1 }
                break;

            // case3操作uname
            case 'rename':
                return { ...state, uname: payload }
                break

            default:
                throw new Error()
        }
    }

    //    2. 使用reducer
    const [state, dispatch] = useReducer(reducer, initState)

    return (<div>
        Reducer  <br />
        count: {state.count}  <br />
        uname: {state.uname}  <br />
        <button onClick={() => dispatch({ type: 'increment', payload: 2 })}> + </button>
        <button onClick={() => dispatch({ type: 'decrement' })}> - </button>
        <button onClick={() => dispatch({ type: 'rename', payload: 'Henry' })}> 改名 </button>
    </div>)





}