ReactとRedux入門・Toolkitの全5つの実装手順【初心者向け】

モダンWeb開発2026.04.172026.04.17

執筆者編集部

MT Templates 編集部

監修者MT Templates 代表/編集長

大野浩史

この記事のポイント

React Reduxでの状態管理は、記述を簡略化するRedux Toolkitの利用が現在の標準であり、TypeScript連携で堅牢な実装が可能な一方、プロジェクト規模に応じてZustandや標準フックなど他の手法と適宜使い分けることが推奨されます。

Reactでの効率的な状態管理を実現するために、React Reduxの導入を検討されている方は多いのではないでしょうか。特有の概念や最新のRedux Toolkitを用いた具体的な実装方法、さらには実務で通用する設計手法まで詳しく知りたいという悩みはよくあります。

こうした疑問を解決するために、本記事では基礎から実践までを解説します。

本記事の内容

Redux Toolkitを用いた最新の標準的な実装手順
実務で役立つTypeScript対応やディレクトリ構成のポイント
他の状態管理ライブラリとの比較やReduxを使わない選択肢

Reactの複雑な状態管理は、Redux Toolkitを活用することで非常にシンプルかつ堅牢に実装可能です。かつてのReduxは記述量が多く古いと感じる場面もありましたが、現在はnpmから簡単にインストールでき、Reducerの記述も大幅に簡略化されました。

本記事は、公式のGitHubリファレンスに基づいたReact Redux入門の決定版です。概念の理解から実践的なコードまで網羅しているため、保守性の高いフロントエンド開発スキルが確実に身につきます。ぜひ最後まで読み進めてください。

ReactとReduxの基本的な仕組み

Reactとは何かを踏まえた上で、状態管理を効率化するために、React Reduxは広く活用されています。Reduxはアプリ全体の「状態」を一元管理するためのライブラリです。

React単体ではプロパティを順に渡すバケツリレーが必要ですが、Redux導入でどのコンポーネントからも直接データにアクセスできます。データの流れが透明になり、デバッグや全体的な保守が容易になる点が大きなメリットです。

状態管理の必要性

大規模な開発では、状態管理の仕組みが欠かせません。共有データが増えると、どこで更新されたかを追跡することが困難になるためです。

状態管理を適切に行うことで、以下の課題を解決できます。

コンポーネント間の過度なバケツリレーの解消
アプリケーション全体での一貫したデータ保持
ユーザー操作に伴う複雑なデータ更新の予測可能性向上

ログイン情報やカートの中身など、アプリの至る所で参照されるデータは中央集権的なストアでの管理が推奨されます。React Redux入門者にとっても、この全体最適は学習すべき重要な概念です。

単方向のデータフロー

Reduxの最大の特徴は、データが常に一方通行で流れる単方向データフローを採用している点です。状態の変更プロセスが単純化され、予期せぬ挙動を防ぐことができます。

データフローの具体的な流れは以下の通りです。

操作によりActionが発行（Dispatch）される
Reducerが現在の状態とActionを受け取り、新しい状態を計算する
Storeが新しい状態を保存する
Reactコンポーネントが状態を検知して再描画される

このサイクルを繰り返すことで、アプリケーションの状態は常に制御された形で更新されます。GitHub上の多くのサンプルコードでも、この基本構造が確認可能です。

各構成要素の役割

Reduxを構成する主な要素について、それぞれの役割を整理します。

要素	役割
Store	アプリケーションの全状態を保持する単一の場所
Action	何を行うかを記述したJavaScriptオブジェクト
Reducer	現在の状態とアクションから次の状態を返す純粋関数
Dispatch	アクションをストアに送り状態更新をトリガーする関数

React Redux npmパッケージを使って連携させる際は、useSelectorでデータを取り出し、useDispatchでアクションを送信します。これが現在の開発における標準的な手法です。

従来の記法が古い理由

Reduxはかつて記述量が多いと批判されましたが、現在はReact Redux Toolkitの登場で状況が変わりました。Action Typesの定義を手動で行うようなReact Redux 古い記法は、現在では非推奨に近い扱いです。

従来の記法が古いとされる主な理由は次の3点です。まずRedux Toolkitの普及により、createSliceなどで少ない記述が可能になりました。次に内部でImmerが動作するため、手動での複雑なオブジェクトコピーが不要になりました。さらにTypeScriptとの相性が向上し、型定義が容易になっています。

最新の現場ではReact Redux TypeScriptを組み合わせたモダンな実装が推奨されています。古いボイラープレートコードを避け、効率的なツールを活用するのがエンジニアとしての近道です。

ReactでRedux Toolkitを使った実装手順

Reactで効率的に状態管理を行うなら、現在はRedux Toolkit（RTK）の利用が標準的です。Redux Toolkitは、従来のReact Reduxで課題だった記述量の多さを解消し、モダンな開発を支える公式推奨ライブラリとなっています。

useStateやContext APIだけではアプリが複雑化して管理が難しい場合、React Reduxは非常に強力です。初心者向けのReact Redux入門として、最新のRedux Toolkitを用いた具体的な実装手順を解説します。

①：パッケージをインストールする

まずはプロジェクトにRedux Toolkitと、Reactと連携するためのライブラリを導入しましょう。Redux Toolkitは効率的な開発を助けるツールセットであり、react-reduxはコンポーネントからストアへアクセスするために必須です。

以下のコマンドをターミナルで実行して、React Redux npmパッケージをインストールしてください。

パッケージ管理ツール	インストールコマンド
npm	npm install @reduxjs/toolkit react-redux
yarn	yarn add @reduxjs/toolkit react-redux

現在は「Redux 古い」とされる従来の手法ではなく、公式が推奨するRedux Toolkit（RTK）を必ず使用してください。React Redux TypeScript環境で開発する場合も、型定義はパッケージに含まれているため別途導入は不要です。

②：ストアを作成する

次に、アプリケーション全体の状態を一括管理する場所であるStore（ストア）を作成します。Redux ToolkitのconfigureStore関数を使えば、開発者ツールの自動設定やミドルウェアの統合が簡単に行えます。

store.jsファイルを作成し、configureStoreを定義して全体の受け皿を準備しましょう。その後、アプリケーションのルートでProviderコンポーネントを使い、作成したストアをアプリ全体へ提供します。

// store.js
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./slices/userSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

従来のcreateStoreは現在は非推奨となっており、基本的にはこのconfigureStoreを使用します。これにより、Redux DevToolsの設定など個別に行う手間を省き、スムーズに開発を開始できます。

③：スライスを定義する

Redux Toolkitの核となるのが、状態と更新処理をまとめて定義できるSlice（スライス）という概念です。createSlice関数を活用することで、Actionの定義やReact Redux Reducerの記述を大幅に簡略化できます。

スライスの定義には、管理する名前や初期値、そして状態をどう更新するかを記したReducersを含めます。

import { createSlice } from "@reduxjs/toolkit";

const initialState = { userInfo: null };

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUserInfo: (state, action) => {
      state.userInfo = action.payload;
    },
  },
});

export const { setUserInfo } = userSlice.actions;
export default userSlice.reducer;

スライスを導入すると、コードの複雑さが解消され保守性が高まります。内部でImmerライブラリが動作しているため、不変性を過度に意識せず直感的に状態を更新できる点も大きなメリットです。

④：コンポーネントで状態を取得する

ストアに保存された最新の状態をコンポーネントで使うには、React Hooksの全体像のひとつであるuseSelectorフックを利用します。useSelectorは、膨大なストアデータの中から必要な情報だけを抽出できる便利な機能です。

react-reduxからこのフックをインポートし、取得したいデータのパスを指定するだけで値を呼び出せます。

import { useSelector } from 'react-redux';

const UserProfile = () => {
  const userInfo = useSelector((state) => state.user.userInfo);
  
  return <div>ユーザー: {userInfo ? userInfo.name : "未ログイン"}</div>;
};

React Redux TypeScriptを利用する際は、RootState型を定義して型安全にデータを取得しましょう。GitHubなどのサンプルコードでも、モダンな実装ではこのフックベースの記述が一般的になっています。

⑤：コンポーネントで状態を更新する

定義した状態を更新したい場合は、useDispatchフックを使ってActionを発行します。Reduxでは状態を直接書き換えることは禁止されており、必ずReducerを経由して更新を行うルールがあります。

実装は簡単で、useDispatchから取得したdispatch関数に、スライスで作成したActionを渡して実行するだけです。

import { useDispatch } from 'react-redux';
import { setUserInfo } from './slices/userSlice';

const LoginButton = () => {
  const dispatch = useDispatch();

  const handleLogin = () => {
    dispatch(setUserInfo({ name: "太郎", isAdmin: true }));
  };

  return <button onClick={handleLogin}>ログイン</button>;
};

かつてのconnect関数を使う手法はレガシーとされており、現在はuseSelectorとuseDispatchを組み合わせるのが正解です。この手順をマスターすれば、大規模なアプリでも円滑なデータ共有が可能になります。

実務でReactとReduxを活用するノウハウ

Reactアプリケーションの規模が拡大すると、コンポーネント間で状態を共有するReduxの重要性が高まります。最新のReact Redux Toolkitの登場により、従来の複雑な記述は大幅に削減されました。

実務でReduxを導入する際は、単に値を管理するだけでなく、型安全性・パフォーマンス最適化・フレームワークとの親和性を考慮した設計が求められます。

TypeScriptにおける型定義

React TypeScriptでの型定義を併用することは、アプリケーションの堅牢性を高めるために不可欠です。型定義を適切に行うことでStateの構造に対する補完が効き、ランタイムエラーを未然に防げます。

Redux Toolkit 2.0以降では、以下の手順で型を抽象化するのが一般的です。

RootStateの定義：configureStoreから全体の型を抽出
AppDispatchの定義：dispatch関数の型を定義し非同期処理に対応
カスタムフックの作成：useSelectorとuseDispatchに型を付与

定義対象	方法	メリット
RootState	ReturnType	全体のステート構造を自動で同期できる
AppDispatch	typeof store.dispatch	非同期Actionの型エラーを防げる
Hooks	useAppSelector等	利用側で毎回型を指定する手間が省ける

コンポーネントでステートを参照する際、存在しないプロパティへのアクセスをコンパイル時点で検知できるため、開発効率と品質が同時に向上します。

大規模開発向けのディレクトリ構成

大規模プロジェクトではファイルが乱立するのを防ぐため、機能単位での構成が推奨され、Reactコンポーネント設計の粒度ともそろえる形になります。React Redux GitHub上の多くのプロジェクトでも採用されるfeature-basedの構成が現在の主流です。

具体的なディレクトリ構成案は以下の通りです。

src/app：Storeの作成や共通の型定義
src/features/user：ユーザー管理のReact Redux ReducerやSlice
src/features/cart：カート機能の実装とAPI通信
src/components：機能に依存しない共通UI部品

機能をまたいだ関心事と特定のロジックを明確に分離することで、コードの可読性と保守性が飛躍的に向上します。

不要な再レンダリングを防ぐ方法

Reduxを導入した際に直面しやすい問題が、意図しない再レンダリングによるパフォーマンス低下です。useSelectorフックは、取得した値が以前と比較して変化した場合にのみ再描画をトリガーする仕組みになっています。

再レンダリングを最小限に抑えるポイントは以下の通りです。

個別の値を選択する：大きなオブジェクトをまるごと取得せず、必要な値だけを抽出する。
createSelectorの活用：メモ化されたセレクタを作成し、計算負荷を軽減する。
等価性チェックの最適化：shallowEqualを使いオブジェクトの浅い比較を実行する。

これらを徹底することで、大規模で複雑なステートを持つアプリでも滑らかな操作感を実現できます。React Redux入門者が次にステップアップするための重要項目です。

Next.js環境に導入する方法

Next.js環境にReact Redux npmパッケージを導入する場合、コンポーネントの使い分けが重要です。サーバーサイドでのレンダリングを考慮し、Storeはクライアントサイドで動作させる必要があります。

導入時に押さえるべきポイントは次の3つです。

Store作成用関数の用意：リクエストごとに新しいStoreを作成する
Providerの宣言：use clientを記述したコンポーネントでラップする
初期データの注入：サーバーで取得したデータをクライアントのStoreへ同期する

Next.jsでの開発は、かつてのReact Redux 古い手法とは異なる設計思想が必要です。最新のベストプラクティスを学び、プロジェクトの要件に合わせて使い分けましょう。

あえてReactでReduxを使わないケース

Reactアプリケーション開発において、Reduxは長らく標準的な選択肢でした。最新のReact 19登場や周辺ライブラリの成熟により、必ずしもすべての現場でReact Reduxが必要なわけではありません。

Reduxは強力なデバッグ機能を備えますが、ボイラープレートが多く学習コストが高い側面もあります。2026年のフロントエンド開発では、規模に応じて軽量な手段を選ぶのが一般的です。

標準フックで完結する規模

小規模なアプリやコンポーネント内で状態が完結する場合、React標準フックの利用が最適です。React Redux入門者が最初に学ぶべきは、標準機能での管理方法と言えます。

React 19ではActionsやuseActionStateなどの新しいフックが導入されました。これにより、従来Reduxで行っていた非同期処理やローディング管理が標準機能だけで完結します。

項目	React標準フック	React Redux (Toolkit)
適した規模	小から中規模	大規模・エンタープライズ
学習コスト	低い	高い
状態の共有	Context APIを使用	Storeによる一元管理
主な用途	フォーム処理・シンプルなUI	複雑なロジック・Undo機能

単純なデータの受け渡しなら、Context APIとuseReducerで十分にバケツリレーを回避できます。

Zustandを採用するプロジェクト

厳格なルールより使い勝手を重視するプロジェクトでは、Zustandが積極的に採用されています。標準機能ではReact Contextとの比較で取り上げられるContext APIも候補に入りますが、Zustandは中規模以降でもReact Redux 古い手法に代わる、モダンな選択肢として定着しました。

ZustandはReduxのようにProviderでアプリを囲む必要がなく、記述が非常にシンプルです。TypeScriptとの親和性も高く、型安全な開発をスムーズに進められます。Zustandが選ばれる主な理由を以下に示します。