1.代码展示

import { useReducer } from "react"

// 1.定义reducer函数，根据不同action返回不同状态
function reducer(state, action) {
    console.log(state, action);
    switch (action.type) {
        case "INC":
            return state + 1
            break;
        case "DEC":
            return state - 1
            break;
        case "SET":
            return action.data
            break;
        default:
            if(action.kanno==="SET"){
                return action.data
            }
            return state
            break;
    }
}

function UseReducer() {
    // 2.组件中调用useReducer钩子函数，该钩子函数有两个参数，第一个参数（必须）是自己定义的逻辑处理方法，第二个参数（非必须）是变量的初始值
    const [state, dispatch] = useReducer(reducer,0)
    return (
        <div>
            {/* 3.调用dispatch((type:"INC"))=>通知reducer产生一个新的状态 使用这个新状态更新UI */}
            <button onClick={() => dispatch({ type: "DEC",data:66 })}>-</button>
            {state}
            <button onClick={() => dispatch({ type: "INC",data:88 })}>+</button>
            <button onClick={() => dispatch({ kanno: "SET",data:100 })}>更新</button>
        </div>
    )
}

export default UseReducer

2.代码说明

自定义的reducer函数中的两个形参，第一个是变量，第二个是dispatch({ xxx: "xxx" })中传递过来的对象

3.效果展示

输出展示：console.log(state, action);

页面展示