【ITニュース解説】🧐 Do You Really Need Redux?

システムエンジニアを目指す初心者がReactアプリケーション開発でよく耳にする「Redux」は、その必要性についてしばしば誤解されている技術の一つだ。Reduxは強力な状態管理ライブラリだが、すべてのアプリケーションで必須というわけではない。むしろ、アプリケーションの規模や要件によっては、導入が不必要な複雑さを生む原因にもなりかねない。本解説では、Reduxの適切な使い方、そしてReduxが必要ないケースとそうではないケースを具体的な例とともに詳しく説明する。

まず、Reduxの基本的な役割について理解しよう。Reactのようなフロントエンドフレームワークでアプリケーションを開発する際、ユーザーの操作やサーバーからのデータなどによってアプリケーションの状態（データ）は常に変化する。例えば、カートの中身、ログインしているユーザーの情報、表示されているテーマ（ダークモードかライトモードか）などがこれにあたる。これらの状態を複数のコンポーネント（部品）間で共有したり、一貫して更新したりする必要がある場合、状態管理の方法が重要になる。Reduxは、アプリケーション全体の状態を「ストア」と呼ばれる一箇所に集約し、予測可能な方法で状態を更新するためのパターンを提供するライブラリだ。これにより、アプリケーションが大規模になり、状態の流れが複雑になった場合でも、データの追跡やデバッグが容易になるというメリットがある。

しかし、Reduxは導入コストがかかる。追加のコード、設定、そして新しい概念を学ぶ必要があるため、小さなアプリケーションではそのメリットよりも手間が上回ってしまうことが多い。例えば、次のようなケースではReduxの導入は避けるべきだと考えられる。

一つ目は、アプリケーションが非常に小規模で、状態管理が単純な場合だ。例えば、シンプルなTODOリストアプリのように、一つのコンポーネントが全ての状態を管理できるようなケース。また、ウェブサイトのテーマをダークモードとライトモードで切り替える機能のように、ごく限られた範囲で状態が変化し、その状態を広範囲に共有する必要がない場合もReduxは不要だ。さらに、ユーザーが入力するフォームで、その入力値がグローバルな（アプリ全体で共有される）必要がない場合も同様だ。

これらのケースでは、Reactが標準で提供している「フック」（Hooks）という機能、特にuseStateフックを使えば十分に対応できる。useStateは、コンポーネント内で特定の状態を管理するための最も基本的なフックだ。例えば、先ほどのテーマ切り替えの例で考えてみよう。

Copy
1import { useState } from "react";
2
3export default function ThemeToggle() {
4  const [dark, setDark] = useState(false); // darkという状態と、それを更新するsetDark関数を定義
5
6  return (
7    <button onClick={() => setDark(!dark)}> // ボタンがクリックされるたびにdarkの状態を反転させる
8      {dark ? "🌙 Dark Mode" : "☀️ Light Mode"} // darkの状態に応じて表示を切り替える
9    </button>
10  );
11}

このコードでは、useState(false)によってdarkという状態変数が定義され、その初期値はfalse（ライトモード）となる。setDark関数を使うことで、このdark変数の値を変更できる。ボタンがクリックされるたびにsetDark(!dark)が呼び出され、darkの状態が現在の値と逆になることで、テーマが切り替わる仕組みだ。このように、コンポーネント自身が管理すべき状態であれば、useStateフックだけで簡潔に実装できるため、Reduxを導入する必要はない。

一方で、Reduxが真価を発揮するのは、アプリケーションが大規模になり、多くのコンポーネント間で共通の状態を共有する必要がある場合だ。例えば、以下のようなアプリケーションではReduxが非常に有効な選択肢となる。

一つは、大規模なECサイト（オンラインショッピングサイト）だ。この種のサイトでは、ユーザーのカートに入っている商品、ログインしているユーザーの情報、適用されている商品フィルター（価格帯、カテゴリなど）といった状態が、アプリケーション内の様々なコンポーネントで共有され、頻繁に更新される。カートの状態はヘッダーのアイコン、カートページ、購入手続きページなど複数の場所で表示され、ユーザーの操作に応じて更新される。

二つ目は、チャットアプリケーションだ。新しいメッセージ、未読通知の数、現在オンラインのユーザーリストなど、これらの状態はアプリケーション全体でリアルタイムに共有され、同期される必要がある。

三つ目は、複雑なデータダッシュボードだ。グローバルなフィルター設定、リアルタイムで更新されるデータ、APIから取得したデータのキャッシュなど、多くの異なるデータが相互に関連し、視覚化される。

このようなケースでは、Reduxのようにアプリケーション全体の状態を一元的に管理する仕組みがあると、状態の変化がどこからどのように行われたかを追跡しやすくなり、アプリケーション全体の整合性を保ちやすくなる。結果として、開発効率が向上し、バグの発生を抑えることにも繋がる。

もしReduxが必要だと判断した場合、現代のRedux開発においては「Redux Toolkit」（RTK）を使うことが強く推奨される。かつてのReduxは、アクション、リデューサー、ストアの設定など、多くの「ボイラープレート」（定型的な記述）が必要で、コード量が多くなりがちだった。しかし、Redux Toolkitはこれらの定型作業を簡略化し、より少ないコードでReduxの機能を活用できるように設計されている。これはRedux公式が推奨する現代的なReduxの書き方だ。

Redux Toolkitを使ったシンプルなカウンターアプリの例を見てみよう。ここでは、数値の状態を管理する「スライス」（Slice）という概念が使われている。スライスは、Reduxの状態の一部と、その状態を更新するロジック（リデューサー）をまとめて定義するものだ。

Copy
1// store/counterSlice.ts
2import { createSlice, PayloadAction } from "@reduxjs/toolkit";
3
4interface CounterState {
5  value: number; // カウンターの現在の値
6}
7
8const initialState: CounterState = { value: 0 }; // 初期状態は0
9
10const counterSlice = createSlice({
11  name: "counter", // スライスの名前
12  initialState, // 初期状態
13  reducers: { // 状態を更新するロジックを定義
14    increment: (state) => { state.value += 1 }, // `state.value`を直接変更できる（内部的にはImmerが処理）
15    decrement: (state) => { state.value -= 1 },
16    addBy: (state, action: PayloadAction<number>) => {
17      state.value += action.payload; // アクションに渡されたペイロードの値を加算
18    }
19  }
20});
21
22export const { increment, decrement, addBy } = counterSlice.actions; // アクションクリエーターをエクスポート
23export default counterSlice.reducer; // リデューサーをエクスポート

このコードでは、createSlice関数を使ってcounterSliceが定義されている。increment、decrement、addByは、カウンターの値を増減させるための「リデューサー」と呼ばれる関数だ。Redux Toolkitを使うと、これらのリデューサー内でstate.value += 1のように直接状態を書き換えるかのように記述できるが、これは内部的にImmerというライブラリがよしなに処理してくれるため、実際のReduxのルールである「状態の不変性」（元の状態を直接変更しない）は保たれている。

次に、このReduxの状態をReactコンポーネントで利用する方法だ。

Copy
1import { useDispatch, useSelector } from "react-redux";
2import { increment, decrement, addBy } from "./store/counterSlice";
3
4export default function Counter() {
5  const count = useSelector((state: any) => state.counter.value); // ストアからカウンターの値を取得
6  const dispatch = useDispatch(); // 状態更新のアクションをディスパッチするための関数を取得
7
8  return (
9    <div>
10      <h2>Count: {count}</h2>
11      <button onClick={() => dispatch(increment())}>➕</button>
12      <button onClick={() => dispatch(decrement())}>➖</button>
13      <button onClick={() => dispatch(addBy(5))}>+5</button>
14    </div>
15  );
16}

useSelectorフックを使うことで、Reduxストア内の特定の状態をコンポーネントから参照できる。ここではstate.counter.valueという形でカウンターの値を取得している。useDispatchフックは、Reduxストアにアクションを「ディスパッチ」（発行）するための関数を提供する。ボタンがクリックされると、dispatch(increment())のようにアクションが発行され、Reduxストアの状態が更新される。すると、useSelectorでその状態を監視しているコンポーネントが再レンダリングされ、最新の値が表示されるという流れだ。このようにRedux Toolkitを使うことで、以前よりもはるかに簡潔にReduxを導入し、状態管理を行えるようになった。

Reduxを導入する際のベストプラクティスもいくつか存在する。まず、Reduxストアには、アプリケーション全体で共有されるべきグローバルな状態のみを格納するようにしよう。例えば、ユーザー情報やカートの状態などだ。一方で、特定のコンポーネント内でのみ使われるUIの状態、例えばモーダルの開閉状態やドロップダウンメニューの表示状態などは、Reduxに含めずにuseStateのようなローカルな状態管理で十分だ。これにより、Reduxストアが肥大化しすぎず、管理しやすくなる。

また、APIからのデータ取得やキャッシュ管理には、Redux Toolkitに組み込まれている「RTK Query」の利用を検討するのも良い方法だ。RTK Queryは、APIとの連携を大幅に簡素化し、データ取得、キャッシュ、ローディング状態の管理などを自動で行ってくれる強力なツールだ。これにより、複雑な非同期処理の状態管理もRedux Toolkitのエコシステム内で一貫して行える。

最後に、Reduxの導入を過度に複雑に考える必要はない。もし共有したい状態が限定的で、Redux Toolkitの導入が大袈裟だと感じるなら、Reactの標準機能であるContext APIとフックの組み合わせで十分な場合もある。Context APIは、状態を深い階層のコンポーネントにバケツリレーすることなく直接渡せる機能であり、小規模から中規模のアプリケーションであればこれで十分な状態管理を実現できることがある。

結論として、Reduxはすべてのプロジェクトで必須というわけではない。アプリケーションの規模と状態管理の複雑さに応じて、適切なツールを選択することが重要だ。小規模なアプリケーションであればuseStateやuseContextといったReactの組み込み機能で十分であり、中規模のアプリケーションではContext APIとフックの組み合わせが有効な選択肢となりうる。そして、大規模で多くのコンポーネント間で複雑な状態を共有する必要がある場合にこそ、Redux Toolkitを活用した予測可能な状態管理が真価を発揮する。Reduxの適切な使い方とは、まさに「いつReduxを使うべきではないか」を知ることだと言えるだろう。