Reduxとは？
state（状態）を容易に管理をするためのフレームワーク（ライブラリ）です。状態管理とは、アプリケーション内のデータ（状態）を一元管理し、必要なコンポーネントがそのデータにアクセスしたり更新したりできるようにすることです。Reduxを使うと、複雑なアプリケーションでも状態管理がスムーズに行えるようになります。
なぜReduxを使うのか？
状態管理にはさまざまな方法がありますが、Reduxには以下のようなメリットがあります：
- 一元管理：アプリケーション全体の状態を一つの場所（ストア）にまとめることで、状態の追跡が容易になります。
- 予測可能な状態遷移：アクションとリデューサーを使って状態遷移を管理するため、状態がどのように変化するかが予測しやすくなります。
- デバッグが容易：Redux DevToolsを使うと、状態の変化を簡単に確認でき、バグの特定が容易になります。
Reduxの基本概念
- アクション：状態を変更するための「何が起こったか」を表すオブジェクトです。
- リデューサー：現在の状態とアクションを受け取り、新しい状態を返す関数です。
- ストア：アプリケーション全体の状態を保持するオブジェクトです。
ReduxをReact（TypeScript）で使う方法
1. ReduxとReact-Reduxのインストール
まず、必要なパッケージをインストールします。
npm install redux react-redux @types/react-redux
2. アクションの定義
アクションを定義します。ここでは、カウンターを増減させるアクションを例にします。
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export interface IncrementAction {
type: typeof INCREMENT;
}
export interface DecrementAction {
type: typeof DECREMENT;
}
export type CounterActionTypes = IncrementAction | DecrementAction;
export const increment = (): IncrementAction => ({
type: INCREMENT,
});
export const decrement = (): DecrementAction => ({
type: DECREMENT,
});
3. リデューサーの作成
リデューサーを作成します。リデューサーは状態とアクションを受け取り、新しい状態を返す関数です。
import { INCREMENT, DECREMENT, CounterActionTypes } from './actions';
export interface CounterState {
count: number;
}
const initialState: CounterState = {
count: 0,
};
const counterReducer = (
state = initialState,
action: CounterActionTypes
): CounterState => {
switch (action.type) {
case INCREMENT:
return { ...state, count: state.count + 1 };
case DECREMENT:
return { ...state, count: state.count - 1 };
default:
return state;
}
};
export default counterReducer;
4. ストアの作成
ストアを作成します。
import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
export default store;
5. ReactとReduxの接続
ReactコンポーネントをReduxストアに接続します。
import React from 'react';
import { Provider, connect } from 'react-redux';
import store from './store';
import { increment, decrement } from './actions';
interface CounterProps {
count: number;
increment: () => void;
decrement: () => void;
}
const Counter: React.FC<CounterProps> = ({ count, increment, decrement }) => (
<div>
<h1>{count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
const mapStateToProps = (state: { count: number }) => ({
count: state.count,
});
const mapDispatchToProps = {
increment,
decrement,
};
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
const App: React.FC = () => (
<Provider store={store}>
<ConnectedCounter />
</Provider>
);
export default App;
データフロー
[Action]
|
| dispatch
v
[Reducer]
|
| 新しいstateを返す
v
[Store]
|
| stateを提供
v
[View (React Component)]
|
| dispatch action
v
[Action]
Redux DevTools
Redux DevToolsは、アプリケーションの状態をリアルタイムで確認し、アクションや状態の変化を追跡できる強力なツールです。開発者はこれを使ってデバッグやパフォーマンスの最適化を行うことができます。
インストール
こちらから、拡張機能をインストールします。
実際に使ってみる
stateの状態が更新された時に、どのアクションが実行されたかを履歴として以下のように可視化することができました。
StateやActionだけではなくDiffで変更前後のstateの差分を確認できたり、Traceでアクション実行時の関数の確認もできます
まとめ
Reduxは、アプリケーションの状態管理を強力にサポートするツールです。特に大規模なアプリケーションでは、その予測可能な状態遷移とデバッグのしやすさが大きな利点となります。TypeScriptと組み合わせることで、型安全な状態管理が可能となり、開発者体験が向上します。初めての方もこの記事を参考に、ぜひReduxを試してみてください。
Discussion