Redux の基本をマスターする: React での状態管理の完全ガイド

Redux の基本: コード例を使用した詳細な説明

Redux は、JavaScript アプリケーション、特に React で広く使用されている状態管理ライブラリです。アプリの状態を一元的に保存できるため、特に大規模で複雑なアプリケーションの管理とデバッグが容易になります。 Redux は一方向のデータ フローに従い、状態の変化が予測可能な方法で発生することを保証し、アプリがどのように動作するかを理解しやすくします。

Redux の基本を段階的に説明し、各概念をコード例で説明します。

---

1. Redux とは何ですか?

Redux は、JavaScript アプリの予測可能な状態コンテナーです。これにより、アプリの状態を一元管理できるようになり、デバッグとスケールが容易になります。

Redux の中核原則:

• 単一の真実の情報源: アプリケーションの状態全体が単一のオブジェクト (ストア) に保存されるため、追跡と操作が簡単になります。
• 状態は読み取り専用です: 状態を変更する唯一の方法は、アクションをディスパッチすることです。
• 変更は純粋関数で行われます: 状態は reducers によって変更されます。これは、アクションに応じて状態がどのように変化するかを指定する純粋関数です。

---

2. Redux の中心的な概念

Redux は次の主要コンポーネントに依存しています:

1.アクション

アクションは、アプリケーション内で発生したイベントまたはアクションを記述するプレーンな JavaScript オブジェクトです。各アクションには、実行されるアクションを説明する type プロパティが必要です。

アクションの例:

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• ここで、インクリメントとデクリメントはアクションクリエーターです。これらは、type フィールドを持つアクション オブジェクトを返します。 type プロパティは、Redux にリデューサーでのアクションの処理方法を指示します。

---

2.レデューサー

reducer は、現在の状態とアクションを受け取り、新しい状態を返す純粋な関数です。レデューサーは、アクションに応じて状態がどのように変化するかを指定する関数です。これらは純粋な関数である必要があります。つまり、元の状態は変更せず、新しい状態オブジェクトを返します。

レデ​​ューサーの例:

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• 上記の例では:
  • 初期状態はカウント 0 で定義されます。
  • リデューサーはアクション INCREMENT と DECREMENT をリッスンし、それに応じてカウント状態を更新します。
  • return { ...state, count: state.count 1 } 行は、不変性を維持し、状態を更新するために新しいオブジェクトを作成します。

---

3.ストア

ストアは、アプリケーションの状態全体を保持します。ストアは Redux の createStore メソッドを使用して作成され、アプリケーションの状態が保存されます。このストアは、アクションをディスパッチし、状態の変更をサブスクライブするメソッドも提供します。

ストアの例:

// reducer.js
const initialState = {
  count: 0
};

const 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;
  }
};

export default counterReducer;

• ストアは、counterReducer を createStore に渡すことによって作成されます。
• 現在、アプリケーションの状態は Redux によって管理されており、状態への変更はすべてリデューサーを経由します。

---

3. Redux と React を接続する

React コンポーネントは、状態を取得してアクションをディスパッチするために Redux ストアと対話する必要があります。 React と Redux を接続するには、別個のライブラリである React-Redux が使用されます。ストアの状態にアクセスするための useSelector やアクションをディスパッチするための useDispatch などのフックを提供します。

Redux を React に接続する手順:

1. react-redux のプロバイダー コンポーネントでアプリをラップして、ストアをすべてのコンポーネントに渡します。
2. 状態にアクセスするには、useSelector を使用します。
3. 状態を変更するアクションをディスパッチするには、useDispatch を使用します。

---

4. React アプリで Redux をセットアップする

Redux をシンプルな React アプリに接続するための完全なセットアップを見てみましょう。

---

ステップ 1: Redux と React-Redux をインストールする

まず、Redux と React-Redux をインストールする必要があります:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

---

ステップ 2: アクションを作成する

Redux では、アクションは状態に加えたい変更を記述するプレーンな JavaScript オブジェクトです。

npm install redux react-redux

• インクリメント関数とデクリメント関数は、アクション オブジェクトを返すアクション クリエーターです。
• アクション オブジェクトには、アクションを説明する type フィールドがあります。

---

ステップ 3: レデューサーを作成する

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

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• リデューサーは INCREMENT アクションと DECREMENT アクションをリッスンし、それに応じて状態を更新します。

---

ステップ 4: ストアを作成する

店は国家が生きる場所だ。 Redux の createStore メソッドを使用して作成されます。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• アプリの状態を管理するストアを作成するために、counterReducer を createStore に渡します。

---

ステップ 5: Redux と React を接続する

ここで、Provider、useDispatch、および useSelector フックを使用して Redux を React アプリに接続しましょう。

// reducer.js
const initialState = {
  count: 0
};

const 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;
  }
};

export default counterReducer;

• プロバイダ: アプリケーション全体をラップし、Redux ストアをすべてのコンポーネントに渡します。
• useSelector: Redux ストアから現在の状態 (カウント) を取得します。
• useDispatch: アクション (インクリメントとデクリメント) をディスパッチできます。

---

5. Redux ツールキット (オプション)

Redux を使いやすくするために、Redux Toolkit は定型コードを減らしてセットアップを簡素化します。これは、reducer の作成やストアの構成などの一般的なタスクを処理する createSlice や configureStore などのユーティリティを提供します。

Redux ツールキットを使用した例:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

• createSlice 関数は、アクション クリエーターとリデューサーを自動的に生成します。
• configureStore はストアのセットアップを簡素化します。

---

6. Redux を使用するためのベスト プラクティス

• グローバル状態に Redux を維持する: アプリケーション全体の状態 (ユーザー認証、設定など) を管理するために Redux を使用します。
• 単純なコンポーネントにローカル状態を使用する: 小規模な状態のニーズ (フォーム入力など) の場合は、Redux の代わりに React の useState を使用します。
• 直接の突然変異を避ける: 不変性を確保するために、状態を更新するときは常に新しいオブジェクトを返します。

---

7.結論

Redux は、React アプリケーションのグローバル状態を管理するための強力なツールです。アクション、リデューサー、ストアを理解することで、複雑な状態を予測可能な方法で管理できます。 Redux Toolkit を使用すると、このプロセスをさらに簡素化できます。 Redux を正しく使用すると、大規模なアプリケーションの管理、デバッグ、拡張が容易になります。

この知識により、Redux を React アプリケーションに組み込む準備が整い、アプリ全体でより効率的な状態管理が保証されます。

---

以上がRedux の基本をマスターする: React での状態管理の完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。