今回はReduxについて記事にしていと思います。
1. Reduxとは？
Reduxは、アプリケーションの状態（データ）を管理するためのツールです。特に大規模なアプリケーションで役立ちます。通常、アプリケーションの状態は複数のコンポーネントで管理されますが、複雑になるとどのコンポーネントがどの状態を持っているのかを追跡するのが難しくなります。Reduxは、こうした問題を解決するために「単一の状態」を使ってアプリケーション全体のデータを管理します。
2. Reduxの基本的な考え方
Reduxの主な概念は以下の通りです：
2.1 単一のストア
Reduxでは、アプリケーション全体の状態が**1つのストア（store）**に集約されます。このストアは、アプリのすべてのデータを保持します。ストアが1つだけなので、状態をどこで管理しているかを迷うことなく、どのコンポーネントからでも必要なデータにアクセスできます。
2.2 アクション（Actions）
アクションは、ストアの状態を変更するために使う「命令」のようなものです。アクションは**「何をしたいのか」**を表します。例えば、ユーザーがボタンをクリックしたときにアクションが発生し、その結果として状態が変更されます。
// アクションの例
const addItemAction = {
type: 'ADD_ITEM',
payload: { item: 'Apple' } // 追加するアイテム
};
2.3 リデューサー（Reducers）
リデューサーは、現在の状態とアクションを使って、新しい状態を作り出す純粋関数です。リデューサーは状態の更新を担当します。アクションが発生すると、リデューサーが呼ばれ、ストアの状態が更新されます。
// リデューサーの例
const itemReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_ITEM':
return [...state, action.payload.item]; // 新しいアイテムを追加
default:
return state;
}
};
2.4 ストア（Store）
ストアは、アプリケーションの状態を保持し、アクションが発生したときにリデューサーを使って状態を更新する役割を持ちます。ストアはReduxの「心臓部」であり、すべての状態がここで管理されます。
// ストアの作成
import { createStore } from 'redux';
const store = createStore(itemReducer);
2.5 ディスパッチ（Dispatch）
ディスパッチは、アクションをストアに送るための関数です。ユーザーの操作などで発生するイベントを基にアクションをディスパッチし、その結果として状態が変更されます。
// アクションをストアにディスパッチする
store.dispatch(addItemAction);
3. Reduxのデータフロー
Reduxのデータフローはとてもシンプルです。「単方向データフロー」を採用しており、アクションから状態が更新されるまでの流れが明確で予測しやすいのが特徴です。
ユーザーの操作: 例えば、ボタンをクリックするとアクションが発生します。
アクションの発行: アクションが発行され、アクションオブジェクトが作成されます。
ディスパッチ: アクションがストアにディスパッチされます。
リデューサーが実行: リデューサーが現在の状態とアクションを受け取り、新しい状態を計算します。
ストアが更新される: ストアが新しい状態に更新され、UI（ユーザーインターフェイス）に反映されます。
4. ReduxをReactで使ってみる
Reduxは、Reactと非常に相性が良いため、よく一緒に使われます。ReactでReduxを使う場合は、react-reduxという公式のバインディングライブラリを使います。
手順：
1. ReduxとReact Reduxのインストール
まず、ReduxとReact-Reduxをインストールします。
npm install redux react-redux
2, ストアの作成
次に、アプリケーション全体で使うストアを作成します。
import { createStore } from 'redux';
// 初期状態
const initialState = { count: 0 };
// リデューサー
const counterReducer = (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(counterReducer);
3. ReactコンポーネントでReduxを使う
ReactのコンポーネントでReduxの状態を使うために、Providerコンポーネントでアプリ全体をラップします。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store'; // 作成したストアをインポート
const App = () => {
return (
<Provider store={store}>
<Counter />
</Provider>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
4, Reduxの状態を使うコンポーネント
Reactコンポーネント内でReduxの状態を使うには、useSelectorとuseDispatchフックを使います。
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
const Counter = () => {
const count = useSelector((state) => state.count); // ストアの状態を取得
const dispatch = useDispatch(); // アクションをディスパッチする関数
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
</div>
);
};
export default Counter;
これで、カウンターの状態をReduxで管理し、ボタンをクリックするたびに状態が更新される仕組みができました。
5. Reduxのメリットとデメリット
メリット
状態が一元管理される: アプリ全体の状態を1つのストアで管理するため、データの管理がシンプルになります。
状態管理が予測可能: Reduxのデータフローは単方向なので、どのように状態が更新されるのかが明確で、デバッグがしやすいです。
デベロッパーツールが豊富: Reduxには、開発者向けのデバッグツール（Redux DevTools）があり、状態の変更を簡単に追跡できます。
デメリット
設定が多い: 小さなアプリケーションでは、Reduxの設定が複雑に感じることがあります。
ボイラープレートコードが多い: アクションやリデューサーを定義するためのコードが多くなることがあるため、規模が小さいプロジェクトではオーバーヘッドになることがあります。
6. Redux Toolkit
Reduxの設定が面倒に感じる場合は、Redux Toolkitを使うと簡単に設定できます。Redux Toolkitは、Reduxの公式ツールセットで、設定を最小限にしてReduxの機能を素早く使えるようにしてくれます。
npm install @reduxjs/toolkit
import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => { state.count += 1 },
decrement: (state) => { state.count -= 1 },
}
});
export const { increment, decrement } = counterSlice.actions;
const store = configureStore({
reducer: counterSlice.reducer
});
まとめ
Reduxは、特に大規模なアプリケーションで役立つ状態管理ライブラリです。アクション、リデューサー、ストアを組み合わせることで、アプリケーション全体の状態を一元的に管理できます。Reactと組み合わせることで、効率的にデータの管理とUIの更新を行うことができ、アプリの規模が大きくなるほどその利点が顕著に現れます。
今回はReduxについて記事にしてみました。
毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです。