React Hooks早わかり(useReducer編)

useReducer 概要

useReducer 用例

1. useState の代替品。
2. (state, action) => newState という型のリデューサ (reducer) を受け取り、現在の state を dispatch メソッドとペアにして返す。
3. 複数の値にまたがる複雑な state ロジックがある場合や、前の state に基づいて次の state を決める必要がある場合に有用。
4. 複数階層にまたがって更新を発生させるようなコンポーネントではパフォーマンスの最適化にもなる。

ボタンクリックでcountステートをインクリメント、デクリメントするサンプルコード。
https://github.com/w8f/react-training/blob/153eab2661d30bbeec13f0fb1d065d5aa4c26c0c/front/src/component/useReducer/UseReducerSample.tsx

import { VFC, useReducer } from "react";
	

type State = {
　　count: number;
};
	

type ActionType = {
　　type: "increment" | "decrement";
};
	

const UseReducerSample: VFC = () => {
    const initialState = { count: 0 };

    // reducer関数を定義する。
    // actionごとにstateに対する処理を記載
    const reducer = (state: State, action: ActionType) => {
        switch (action.type) {
            case "increment":
                return { count: state.count + 1 };
            case "decrement":
                return { count: state.count - 1 };
            default:
                throw new Error();
        }
    };
	

    // useReducerを呼び出す。
    // 第一引数にreducer関数、第二引数に初期値のステートを指定する。
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div style={{ textAlign: "center" }}>
            <p>count: {state.count}</p>
            <button
                style={{ margin: 3 }}
                onClick={() => {
                    dispatch({ type: "increment" });
                }}
            >
            +
            </button>
            <button
                style={{ margin: 3 }}
                onClick={() => {
                    dispatch({ type: "decrement" });
                }}
            >
            -
            </button>
        </div>
    );
};
	
export default UseReducerSample;