SOURCE

//useReducer是react提供的一个状态管理Hook,通过reducer(state,action)-> newState的纯函数模式来更新状态
//- reducer 保持纯函数：不要在 reducer 内做副作用
//- action 结构明确：type 必填
//将复杂逻辑尽量集中在 reducer，视图层只 dispatch

 /*  - useReducer vs useState：
 *   - useState 更简单：适合少量、简单状态。
 *   - useReducer 更清晰：适合复杂状态、多分支更新、可测试性强。
*/
import React,{useReducer} from 'react'

function counterReducer(state, action) {
    switch (action.type) {
        case "increment":
        return {count: state.count+1}
        case "decrement":
        return {count:state.count-1}
        case "reset":
        return {count:0}
        default:
        return state
    }
}
const initialCounter = {count:0}//初始值

export function DemoCounter() {
    const [state, dispatch] = useReducer(counterReducer,initialCounter)
    return (
        <div>
        <p>count:{state.count}</p>
        <button onClick={()=>{()=>dispatch({type:increment})}}>+</button>
        <button onClick={()=>{()=>dispatch({type:decrement})}}>-</button>
        <button onClick={()=>{()=>dispatch({type:reset})}}>重置</button>
        </div>
    )
}