useReducerを試す

写経しながら試す。 一部変えたりして、動きを試す。

useStateでは、複雑になりそうなケースについて、useReducerを使うといいっぽい。

import {useReducer} from "react";

function reducer(state, action) {
    switch (action.type) {
        case 'increment_age':
            return {
            age: state.age + 1
            }
        case 'decrement_age': 
            return {
                age: state.age - 1
            }
        default:
         throw Error('Unknown type');
    }
}

export default function App()  {
    const [state, dispatch] = useReducer(reducer, {age: 40});

    return (
        <>
            <button onClick={() => {
                dispatch({type: 'increment_age'})
            }}>
                increment age
            </button>
            <button onClick={() => {
                dispatch({type: 'decrement_age'})
            }}>
                decrement age
            </button>
            <p>age is {state.age}</p>
        </>
    )

}

参考 ja.react.dev