Reactは、ビューライブラリーとして非常に人気がありますが、アプリケーションの規模が大きくなると、状態管理が重要になってきます。Reduxは、Reactと一緒に使われることが多い状態管理ライブラリーです。この記事では、ReactでReduxを使った状態管理の基本について解説します。
Reduxとは何か
Reduxは、アプリケーションの状態を管理するためのライブラリーです。Reactでは、コンポーネントの状態を管理することができますが、Reduxを使うことで、アプリケーション全体の状態を一元管理することができます。Reduxは、アプリケーションの状態をストアと呼ばれるオブジェクトに保存し、アクションをディスパッチすることで、状態を変更します。
Reduxの基本概念
Reduxを使うには、以下の3つの基本概念を理解する必要があります。
ストア
ストアは、アプリケーション全体の状態を保持するオブジェクトです。ストアは、Reducerと呼ばれる関数によって更新されます。
アクション
アクションは、ストアの状態を変更するためのオブジェクトです。アクションは、typeプロパティを持ち、必要に応じてペイロードを持つことができます。
Reducer
Reducerは、現在の状態とアクションを受け取り、新しい状態を返す関数です。Reducerは、純粋な関数でなければなりません。
Reduxの使い方
Reduxを使うには、以下の手順を実行する必要があります。
1. Reduxのインストール
npmやyarnを使って、Reduxをインストールします。
npm install redux
2. ストアの作成
ストアを作成するには、createStore関数を使います。
import { createStore } from 'redux';
const initialState = {
count: 0,
};
function reducer(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
(reducer);
3. アクションの定義
アクションは、typeプロパティを持つオブジェクトです。アクションを定義するには、単純なJavaScriptオブジェクトを作成します。
const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };
4. アクションのディスパッチ
アクションをディスパッチするには、ストアのdispatchメソッドを使います。
store.dispatch(incrementAction);
store.dispatch(decrementAction);
5. 状態の取得
状態を取得するには、ストアのgetStateメソッドを使います。
const state = store.getState();
console.log(state.count);
このように、Reduxを使うことで、アプリケーションの状態を一元管理することができます。
まとめ
ReactでReduxを使った状態管理の基本について解説しました。Reduxを使うことで、アプリケーション全体の状態を一元管理することができます。また、Reduxを使うためには、ストア、アクション、Reducerという基本概念を理解する必要があります。以上が、ReactでReduxを使った状態管理の基本です。