Reactでの状態管理：useReducerとReduxの比較

Reactは、コンポーネントベースのライブラリであり、大規模なアプリケーションでも効率的に管理できるように設計されています。Reactの状態管理には、useReducerとReduxがあります。この記事では、それら2つの方法を比較します。

useReducer

useReducerは、Reactに組み込まれた状態管理のためのフックです。useStateの代替手段として使用することができます。useReducerは、コンポーネントのロジックをシンプルにするために、アクションとともに新しい状態を返す関数を定義します。

例えば、以下のように書くことができます。

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

Redux

Reduxは、Reactの状態管理ライブラリです。Reduxは、アプリケーションの状態を1つのストアに集約し、コンポーネント間で共有できるようにします。Reduxは、アプリケーションの状態を変更するためのアクションを定義し、それに対応するリデューサーを使用して状態を変更します。

Reduxを使用すると、以下のように書くことができます。

import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

function Counter() {
  const { count } = store.getState();

  return (
    <>
      Count: {count}
      <button onClick={() => store.dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => store.dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

比較

useReducerとReduxは、Reactの状態管理のための2つの方法です。どちらも状
態管理においてはアクションとリデューサーの概念を使用していますが、Reduxはより複雑で柔軟なアプリケーションに対応するために、独自のアーキテクチャとAPIを提供しています。

一方、useReducerはReactに組み込まれた機能であるため、Reduxに比べて学習コストが低く、小規模なアプリケーションに適しています。また、Reduxには追加のパッケージや機能が必要な場合がありますが、useReducerはReactの一部であるため、追加のライブラリを必要としません。

ただし、大規模なアプリケーションになると、useReducerは複雑になり、Reduxのような中央集権的なアプローチが必要になる場合があります。また、Reduxは、複数のコンポーネントで状態を共有できるため、アプリケーション全体で状態を管理することができます。

まとめ

Reactでの状態管理には、useReducerとReduxの2つの方法があります。useReducerはReactに組み込まれた機能であり、小規模なアプリケーションに適しています。一方、Reduxは、アプリケーションの状態を中央集権的に管理し、複数のコンポーネントで共有できるようにするために使用されます。選択する方法は、アプリケーションの規模と要件によって異なります。