Redux ツールキットのマスタリング: React アプリの状態管理を簡素化する-jsチュートリアル-php.cn

Mastering Redux Toolkit: Simplify State Management in Your React App

Redux ツールキット: React での状態管理を簡素化する

Redux Toolkit は、アプリケーションで Redux をセットアップするプロセスを簡素化する、独自の意見を持つ強力な公式ライブラリです。 Redux は非常に強力ですが、状態管理、アクションの作成、リデューサーを処理するために多くの定型コードが必要になる場合があります。 Redux Toolkit (RTK) は、一般的なタスクを簡素化する一連のユーティリティ関数を提供することで、Redux 開発をより簡単かつ効率的に行うように設計されています。

Redux Toolkit を使用すると、より簡潔かつ体系的にストアを構成し、リデューサーを作成し、アクションを定義できます。また、開発者がよくある間違いや定型コードを回避するのに役立つデフォルト設定もいくつか含まれています。

1. Redux ツールキットとは何ですか?

Redux Toolkit は、より構造化され、簡潔で、ユーザーフレンドリーな方法で Redux ロジックを作成するための公式の推奨ライブラリです。不変状態の更新を自動的に処理したり、アクションクリエーターとリデューサーを簡素化するなど、Redux セットアップの複雑さを軽減するユーティリティを提供することで、反復的なコードの必要性を排除します。

2. Redux Toolkit のコア機能

Redux Toolkit は、Redux の使用を効率化するためのいくつかの組み込み機能とユーティリティを提供します。

1. configureStore

configureStore は、非同期アクション用の redux-thunk などの重要なミドルウェアを自動的に追加し、デバッグ用に Redux DevTools をセットアップすることにより、ストア構成を簡素化します。

例:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

ログイン後にコピー

configureStore はストアの作成を処理するため、createStore 関数と比較してより簡単かつ標準化されています。

2. createSlice

createSlice は、Redux 状態の一部を表し、リデューサーとアクションの両方を含む Redux スライスの作成を簡素化するユーティリティです。

例:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

ログイン後にコピー

createSlice は、定義したリデューサー関数に基づいて アクションクリエーター と アクションタイプ を自動的に生成します。

3. createAsyncThunk

createAsyncThunk は、API からデータを取得して Redux 状態に統合するなど、非同期ロジックを処理するためのツールです。非同期フローを管理するために、一連のアクション作成者 (保留中、履行済み、拒否された状態) を生成します。

例:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

ログイン後にコピー

createAsyncThunk は、Redux での非同期リクエストをクリーンでわかりやすい方法で管理するのに役立ちます。

4. createEntityAdapter

createEntityAdapter は、Redux で正規化されたデータを管理するユーティリティです。アイテムのリストなどのデータのコレクションを効率的に処理するのに役立ちます。

例:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

ログイン後にコピー

createEntityAdapter は、データのコレクション (リストや配列など) の操作を簡素化し、データの追加、更新、削除などのエンティティの管理を容易にします。

3. Redux ツールキットの利点

1.定型文を減らす

RTK は、Redux のセットアップに必要な定型コードの量を大幅に削減します。アクションタイプ、アクションクリエーター、リデューサーを手動で記述する代わりに、createSlice を使用してすべてを自動的に生成できるようになりました。

2.不変の更新 (Immer.js 経由)

RTK は内部で Immer.js を使用します。これにより、リデューサー内で「変異型」コードを作成できます。ただし、Immer は、状態のコピーを自動的に作成し、それらに突然変異を適用することで、状態が不変のままであることを保証します。

3.開発者エクスペリエンスの向上

redux-thunk などのミドルウェアを自動的に構成し、Redux DevTools と統合することにより、Redux Toolkit は Redux の状態のデバッグと監視を容易にします。 RTK はタイプセーフを強力にサポートしているため、TypeScript などのツールも簡単に使用できます。

4.簡略化された非同期ロジック

createAsyncThunk 関数は、複雑な非同期ロジックの管理に役立ち、それを Redux 状態にシームレスに統合して、非同期操作の管理の複雑さを軽減します。

5. createEntityAdapter でデータを正規化する

RTK は、正規化されたデータを処理するための createEntityAdapter などのユーティリティを提供します。これは、Redux で大規模なデータセット (ユーザー、製品などのリストなど) を管理する場合に特に便利です。

4. React アプリで Redux ツールキットをセットアップする

これは、React アプリで Redux Toolkit をセットアップするための基本ガイドです。

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

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

export const fetchData = createAsyncThunk(
  'data/fetchData', 
  async (url) => {
    const response = await fetch(url);
    return response.json();
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default dataSlice.reducer;

ログイン後にコピー

ステップ 2: スライスとリデューサを作成する

createSlice を使用して Redux スライスを定義します。これには、特定の状態部分のアクションとリデューサーの両方が含まれます。

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

const usersAdapter = createEntityAdapter();

const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;

ログイン後にコピー

ステップ 3: ストアを構成する

次に、configureStore を使用して Redux ストアを設定します。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

ログイン後にコピー

ステップ 4: React コンポーネントで Redux を使用する

react-redux の Provider コンポーネントでアプリをラップして、アプリケーション全体で Redux ストアを利用できるようにします。

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

ログイン後にコピー

useSelector: Redux 状態にアクセスします。
useDispatch: 状態を変更するアクションをディスパッチします。

5.結論

Redux Toolkit は、ボイラープレートコードを削除し、createSlice、createAsyncThunk、configureStore などのユーティリティ関数を提供することで、Redux を使用するプロセスを簡素化します。 RTK を使用することで、開発者は Redux 構成の複雑さを気にすることなく、アプリケーションのコアロジックに集中できます。

RTK を使用すると、同期状態と非同期状態の両方をより効率的かつ保守しやすい方法で管理できるため、大規模な React アプリケーションに最適です。

以上がRedux ツールキットのマスタリング: React アプリの状態管理を簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。