Reduxとは？わかりやすく解説

2024年11月7日2024年11月8日

Reactの学習をしていると「Redux」という言葉を聞いたことがないでしょうか。

Reduxは簡単に言うと、状態管理をとてもラクにしてくれるライブラリのことです。

特にアプリが複雑になると、コンポーネント間のデータ共有や状態管理が難しくなりがちです。

そんな悩みを解決するためのツールが Redux です。

この記事では、Reduxの基礎からその構成要素と使い方まで、できるだけわかりやすく解説していきます。

Reactを使っているけれどReduxがいまいちよくわからないという方に向けて書いているので、

少しでも役立てていただければ幸いです。

Reduxなにもわからん。よろしくおねしゃす。

Reduxとはなにか？

Redux は、JavaScriptアプリケーションのための 状態管理ライブラリ です。

通常、Reactのようなフロントエンドフレームワークでは、

コンポーネントの内部状態（state）を使ってデータを管理します。

しかし、アプリが大きくなると、コンポーネント間の状態の受け渡しが複雑になり、

管理が難しくなることがあります。

Reduxは、そうした状態の管理を一元化し、

アプリケーション全体の状態をシンプルかつ予測可能なものにするのに役立ちます。

Reduxは、「単一のグローバルな状態」を持ち、その状態を「ストア（Store）」と呼びます。

すべての状態変更は「アクション（Action）」と「リデューサー（Reducer）」を通じて行われます。

これにより、アプリの状態がいつどこで変更されたかを把握しやすくなるのです。

ちなみに
Storeは「蓄える、保存する」という意味がある。
Actionは「指示、行動、動作」という意味がある。
Reducerは「まとめるやつ、減らすやつ」という意味がある。

Reduxの主要な要素とそれぞれの役割

1. Store（ストア） – 状態の保存場所

Reduxにおける「Store」は、アプリケーション全体の状態を保持する「倉庫」のようなものです。

Storeはアプリ内で一つしかなく、すべてのデータを管理します。

この中央管理によって、どのコンポーネントからでも必要なデータを取得でき、データの一貫性が保たれます。

Storeの作成方法

Reduxでは、createStore関数を使ってStoreを作成します。以下のコードは簡単なStoreの例です。

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

JSX

createStore関数には「リデューサー（Reducer）」という関数を渡します。

あとで説明するリデューサーは、Storeの状態をどのように変更するかを決定する役割を持っています。

2. Action（アクション） – 状態変更の指示

アクションは、Storeの状態を変更するための「指示書」です。

アクションは通常、JavaScriptオブジェクトとして定義され、

typeプロパティでそのアクションの種類を指定します。

また、必要に応じて他のデータも渡すことができます。

// Actionの例
const incrementAction = {
  type: 'INCREMENT'
};

JSX

この例では、typeがINCREMENTとなっており、

このアクションが「カウンターを増やす」ことを示しています。

アクション作成関数

アクションは、Action Creator（アクション作成関数）を使って作成するのが一般的です。

以下に、INCREMENTアクションを作成する関数を示します。

const increment = () => ({
  type: 'INCREMENT'
});

JSX

このようにしてアクションを定義することで、いつでも呼び出せるようになります。

3. Reducer（リデューサー） – 状態変更の処理

リデューサーは、アクションによって指示された状態変更を”実際に行う役割“を持つ関数です。

リデューサーは現在の状態とアクションを受け取り、更新後の新しい状態を返します。

リデューサーは「純粋な関数」でなければならず、

受け取ったデータを変更せずに新しい状態を返すことが重要です。

以下は、カウンターを増減させるリデューサーの例です。

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

JSX

このリデューサーでは、INCREMENTまたはDECREMENTアクションが送られてきた場合に

カウンターの値を変更し、それ以外の場合はそのままの状態を返しています。

Reduxの基本的な使い方

ここまででReduxの主要な要素を理解できたと思います。

次は、実際にReduxを使って簡単なアプリを作る手順を紹介します。

1. Storeの設定

まず、アプリ全体で使うStoreを作成します。

リデューサー関数を作成し、Storeに渡します。

import { createStore } from 'redux';

// リデューサーを定義（上記で作成したものを使用）
function rootReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

// Storeを作成
const store = createStore(rootReducer);

JSX

2. コンポーネントでのデータ取得

次に、Reactコンポーネント内でReduxのStoreを使用する方法を見ていきます。

ReactとReduxを連携させるには、react-reduxというライブラリを使うのが一般的です。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count); // Reduxの状態を取得
  const dispatch = useDispatch(); // アクションを発行するための関数を取得

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
};

export default Counter;

JSX

useSelectorを使ってStoreから状態を取得し、

useDispatchでアクションを発行することで、状態を簡単に更新できます。

3. アプリ全体にReduxを提供する

ReduxのStoreをReactアプリ全体で使えるようにするには、

Providerコンポーネントを使用して、アプリ全体にStoreを提供します。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store'; // 作成したStoreをインポート
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

JSX

これでReduxが使えるようになりました。

なぜReduxを使うのか？

Reactの状態管理は、

通常コンポーネント内部のuseStateやuseReducerといったフックで十分なケースもあります。

しかし、アプリが大規模化するに従い、次のような問題が生じることがあります。

状態の管理が難しくなる
コンポーネントが増え、データの流れが複雑になると、どこで何が管理されているか分かりづらくなります。Reduxを使うことで、状態を一元管理できるため、データの流れがシンプルで予測可能になります。
データの受け渡しが煩雑
子コンポーネントにデータを渡すために、親コンポーネントから何層にも渡していく「プロップスドリリング」という問題が発生することがあります。Reduxを導入すると、どのコンポーネントからでも直接状態を取得でき、プロップスドリリングが不要になります。
状態の変更の追跡がしやすい
Reduxでは、すべての状態の変更が「アクション」を通して行われるため、「どの部分で」「どのように」状態が変更されたかを追跡しやすくなります。これにより、デバッグが容易になり、エラーの特定が簡単になります。
開発者ツールによるサポート
Reduxには公式の「Redux DevTools」があり、過去の状態やアクションの履歴を確認したり、時間をさかのぼって状態を再現することができます。この機能は、特に複雑なアプリケーションを開発する際に大きな助けになります。

これらの理由から、Reduxはアプリケーションの規模が大きくなるほど利用されており、

データ管理をシンプル化するために大いに貢献しているのです。