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

useReducer とは？

useReducerは、Reactで状態管理を効果的に行うためのReact Hooksです。
状態管理と状態更新ロジックを一元的に管理できます。

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を使用することで、Reducerを効率的に作成しています。

// 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. 状態管理を行うコンポーネントでReducerをインポートする

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を目指す