React: Redux、Redux Thunk、および Redux Toolkit の包括的なガイド | カマクシ著 | 2024年4月

ユーザー インターフェイスを構築するためのユビキタス JavaScript ライブラリである React は、多くの場合、複雑なアプリケーション用の堅牢な状態管理ソリューションを必要とします。 人気の状態管理ライブラリである Redux が、アプリケーションのデータの一元的なストアを提供し、コンポーネント間の一貫性を確保します。 ただし、Redux 自体にはセットアップ用の定型コードが必要です。 ここで Redux Thunk と Redux Toolkit が役に立ちます。

Redux を理解する: 状態管理の中核

ショッピング カートやユーザー情報など、すべてが同じデータに依存する多数のコンポーネントを含む、広大な React アプリケーションを想像してください。 個々のコンポーネント内でこのデータを追跡するのは面倒になり、不整合が生じる可能性があります。 Redux は一元化されたソリューションを提供します。

• 唯一の真実の情報源: Redux はアプリケーション全体の状態を単一のオブジェクトに保存するため、コンポーネント階層を介してデータを渡す必要がなくなります。
• 予測可能なアップデート: Redux は一方向のデータ フローを強制します。 状態の更新は、アクションを通じて行われます。アクションは、必要な変更を記述するプレーンな JavaScript オブジェクトです。 リデューサ、つまり純粋な関数は、これらのアクションを処理し、それに応じて状態を更新します。
• タイムトラベルのデバッグ: Redux DevTools を使用すると、状態の変化を記録して再生できるため、複雑なインタラクションのデバッグが簡単になります。

Redux データ フローの簡略化された図は次のとおりです。

1. コンポーネント: ディスパッチアクション。これは、望ましい状態の変更を記述するプレーンな JavaScript オブジェクトです。
2. 行動： これらのオブジェクトには通常、type プロパティと、更新するデータを含むペイロードがあります。
3. レデューサー: 現在の状態とディスパッチされたアクションを受け取る純粋な関数。 アクション タイプとペイロードに基づいて新しい状態オブジェクトを返します。
4. 店： アプリケーションの状態に関する唯一の信頼できる情報源を保持します。 アクションを受け取り、それをリデューサーにディスパッチして状態を更新します。 コンポーネントはストアに接続して現在の状態にアクセスし、アクションをディスパッチできます。

Redux Thunk: 非同期操作をマスターする

Redux はアプリケーションの状態の管理には優れていますが、API からのデータのフェッチなどの非同期操作をネイティブに処理することはできません。 ここで Redux Thunk が登場します。Redux Thunk は、プレーン オブジェクトの代わりに関数を返すアクション クリエーターを作成できる Redux 用のミドルウェアです。 これらの関数は、非同期操作 (API 呼び出しなど) を実行し、操作の完了時に追加のアクションをディスパッチできます。

API からデータを取得する Redux Thunk アクション クリエーターの例を次に示します。

JavaScript

const fetchUsers = () => async (dispatch) => {
const response = await fetch('https://api.example.com/users');
const data = await response.json();
dispatch({ type: 'USERS_LOADED', payload: data });
};

Redux ツールキット: Redux セットアップの簡素化

Redux Toolkit は、Redux 上に構築されたユーティリティのコレクションで、一般的な Redux タスクを簡素化します。 次のような機能を提供します。

• ストアの構成: Redux ツールキットは、 configureStore Redux Thunk などの事前設定されたミドルウェアを使用してストアを簡単にセットアップするための機能。
• レデューサーの作成: 次のようなユーティリティが含まれています createSlice より簡潔な方法でリデューサーを作成するため。
• 正規化: Redux Toolkit は、Normalizr などのライブラリと統合して、複雑な状態構造を効率的に管理します。
• 不変の更新: Redux Toolkit では、Immer などのライブラリを使用して、リデューサー内で不変の状態更新の作成を簡素化することが推奨されています。

以下は、で作成されたスライスの例です。 createSlice 単純なカウンター状態を管理するには:

JavaScript

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

1. プロジェクトのセットアップ

まず、Create React App (CRA) などのツールといくつかの追加パッケージを使用します。 ターミナルを開き、次のコマンドを実行して新しい React プロジェクトを作成します。

バッシュ

npx create-react-app shopping-cart

cd shopping-cart

必要な依存関係をインストールします。

• react-redux: React コンポーネントを Redux ストアにバインドします。
• redux: コア Redux ライブラリ。
• redux-thunk: 非同期操作を処理するためのミドルウェア。
• @reduxjs/toolkit: Redux のセットアップを簡素化するためのユーティリティを提供します。

バッシュ

npm install react-redux redux redux-thunk @reduxjs/toolkit

2. Redux ストアとリデューサー

を作成します store.js ファイルを使用して Redux ストアをセットアップし、ショッピング カートの状態を管理するためのリデューサーを定義します。

を作成します store.js 中のファイル src ディレクトリ：

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice'; // We'll create this slice next

const store = configureStore({
reducer: {
cart: cartReducer, // Add your reducers here
},
middleware: [thunk], // Include Redux Thunk middleware
});export default store;

3. ショッピング カート スライスの作成

さて、作成しましょう cartSlice.js ファイルを使用して、ショッピング カートのアイテムを管理するためのリデューサーを定義します。 このファイルも src ディレクトリ：

JavaScript

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
items: [],
};const cartSlice = createSlice({
name: 'cart',
initialState,
reducers: {
addItem: (state, action) => {
const newItem = action.payload;
const existingItem = state.items.find((item) => item.id === newItem.id);
if (existingItem) {
existingItem.quantity++;
} else {
state.items.push(newItem);
}
},
removeItem: (state, action) => {
const itemId = action.payload;
state.items = state.items.filter((item) => item.id !== itemId);
},
},
});export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

このスライスは 2 つのレデューサーを定義します。

• addItem: アイテム オブジェクトをペイロードとして受け取り、カートに追加します。 アイテムがすでに存在する場合は、数量が増加します。
• removeItem: アイテム ID をペイロードとして受け取り、対応するアイテムをカートから削除します。

4. 製品の取得 (Redux Thunk を使用)

API (ここでシミュレートされています) から製品データを取得し、カートに商品を追加するアクションをディスパッチするための別のコンポーネントを作成します。 を作成します Products.js 内部のコンポーネント src/components ディレクトリ：

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { addItem } from '../store/cartSlice';

const Products = () => {
const dispatch = useDispatch();  useEffect(() => {
const fetchProducts = async () => {
const response = await fetch('https://example.com/api/products'); // Replace with your API endpoint
const products = await response.json();
products.forEach((product) => dispatch(addItem(product)));
};    fetchProducts();
}, [dispatch]);  return (

{/* Display product list and functionality to add items to cart */}

);
};export default Products;

このコンポーネントは、 useDispatch Redux ストアと対話するためのフック。 API から製品データを取得し (URL を実際のエンドポイントに置き換えます)、 addItem 各製品のアクション、カートに追加します。

5. ショッピングカートの表示

を作成します Cart.js 内部のコンポーネント src/components カート項目を表示し、削除する機能を提供するには:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeItem } from '../store/cartSlice';

const Cart = () => {
const cartItems = useSelector((state) => state.cart.items);
const dispatch = useDispatch();  const handleRemoveItem = (itemId) => {
dispatch(removeItem(itemId));
};

この包括的なガイドでは、React、Redux、Redux Thunk、および Redux Toolkit について説明し、React アプリケーションで状態を効果的に管理するための知識を提供します。

重要なポイントをまとめると次のようになります。

• 戻ってきた： アプリケーションの状態の一元的なストアを提供し、コンポーネント間の一貫性を確保し、アクションとリデューサーによる予測可能な更新を可能にします。
• Redux サンク: Redux ワークフロー内で API 呼び出しなどの非同期操作を処理できるようにします。
• Redux ツールキット: ストアの設定やリデューサーの作成などの一般的な Redux タスクを簡素化し、不変の更新を促進することで、コードがよりクリーンで保守しやすくなります。

これらのツールを組み合わせることで、堅牢でスケーラブルな React アプリケーションを構築できます。 Redux は複雑な状態を管理するための構造化されたアプローチを提供し、Redux Thunk と Redux Toolkit は開発プロセスを合理化します。 練習が鍵であることを忘れないでください。 これらの概念を試し、小さなプロジェクトを構築し、徐々に大きなアプリケーションに統合してください。 経験を積むにつれて、最も複雑な React プロジェクトであっても状態管理の課題に対処できるようになるでしょう。