[React] useReducer を使いこなそう！

useReducer とは？

useReducerは、Reactで状態管理を効果的に行うためのフックです。
複雑な状態管理や状態更新ロジックを明確かつ一元的に管理できます。

また、useContextと組み合わせると、グローバルな状態管理が実現できるようになります。

useReducerを利用することのメリット

useReducerを使うことで、以下のメリットがあります。

• 状態を一つのオブジェクトにまとめることで、状態の構造を一目で把握できる
• 状態更新はreducerで一括管理されるため、どのように変更されるかが明確になり、バグが発生しにくくなる
• 状態の更新処理をコンポーネントから切り離すことができる

---

構文

const [state, dispatch] = useReducer(reducer, initialState)

• state: 現在の状態
• dispatch: Actionを発行する
• reducer: 状態の更新する純粋関数
• initialState: 状態の初期値

useStateとの比較

	useState	useReducer
状態スコープ	ローカル	useContext()を使用することでグローバルも可
更新方法	更新関数で都度定義	宣言時に更新方法を指定 (reducer)

---

実践例

1. カスタムフックの作成

以下は、useReducerを使ったカスタムフックです。
Redux ToolkitのcreateSliceを使用しています。

// hooks/useCounter.ts
import { useReducer } from 'react';

import { createSlice } from '@reduxjs/toolkit/react';

interface CounterState {
  count: number;
}

const initialState: CounterState = {
  count: 1,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.count++;
    },
    decrement: (state) => {
      state.count--;
    },
  },
});

const { actions, reducer } = counterSlice;
const { increment, decrement } = actions;

// useReducer
export const useCounter = () => {
  const [state, dispatch] = useReducer(
    reducer,
    initialState,
  );

  return {
    state,
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement()),
  };
};

export { reducer };

2. インポート

import React from 'react';

import { useCounter } from './hooks/useCounter';

const ComponentA: React.FC = () => {
  const { state, increment, decrement } = useCounter();

  return (
    <div>
      <h1>ComponentA</h1>
      <p>Count: {state.count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default ComponentA;

---

まとめ

• 更新関数を予め定義しておくことでバグの混入を防げる
• useContext + useReducerでのグローバル管理で脱Reduxを目指す