useReducerがよくわからないので、整理する

userReducerについて本で学習したがいまいちわからなかったので、自分用にアウトプットします

useReducerとは

状態を扱うためのフック。useStateよりも複雑な状態管理に向いている。状態が配列はオブジェクトなど複数あるときに便利。

構文

type Action = '状態1' | '状態2' | '状態３'

const reducer(現在の状態, action: Action) {
    return 次の状態
}

const [現在の状態, dispatch] = useReducer(reducer, reducerに渡される初期状態)

// dispatch('状態1')で状態を更新させる

言語化すると、更新関数dispatchに引数としてactionを渡すと、reducerが現在の状態を更新してくれる

例

ボタンによってCountが変化するコンポーネントを作成してみます

import { useReducer } from 'react'

type Action = 'INCREMENT' | 'DECREMENT' | 'DOUBLE' | 'RESET'

// actionに応じて次の状態を返す
const reducer = (currentCount: number, action: Action) => {
    switch (action) {
        case 'INCREMENT':
            return currentCount + 1
        case 'DECREMENT':
            return currentCount - 1
        case 'DOUBLE':
            return currentCount * 2
        case 'RESET':
            return 0
        default:
            return currentCount
    } 
}

type CounterProps = {
    initialValue: number
}

// Counterコンポーネント
const Counter = (props: CounterProps) => {
    const {initialValue} = props
    const [count, dispatch] = useReducer(reducer,initialValue)

    return (
        <>
            <p>Count: {count}</p>
            <button onClick={() => dispatch('INCREMENT')}>+</button>
            <button onClick={() => dispatch('DECREMENT')}>-</button>
            <button onClick={() => dispatch('DOUBLE')}>×2</button>
            <button onClick={() => dispatch('RESET')}>reset</button>
        </>
    )
}

export default Counter

型エイリアスでActionを４つの状態で定義しています

type Action = 'INCREMENT' | 'DECREMENT' | 'DOUBLE' | 'RESET'

boolean型のuseStateを使用すると、２種類の状態でしか管理できません。しかし、useReducerを用いれば、３つ以上の状態を管理することができます。