Redux ツールキット: React での狀態(tài)管理を簡素化する

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

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

---

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

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

---

2. Redux Toolkit のコア機(jī)能

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

1. configureStore

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

例:

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

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

export default store;

• configureStore はストアの作成を処理するため、createStore 関數(shù)と比較してより簡単かつ標(biāo)準(zhǔn)化されています。

2. createSlice

createSlice は、Redux 狀態(tài)の一部を表し、リデューサーとアクションの両方を含む 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 は、定義したリデューサー関數(shù)に基づいて アクション クリエーター と アクション タイプ を自動的に生成します。

3. createAsyncThunk

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

例:

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

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

export default store;

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

4. createEntityAdapter

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

例:

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 は內(nèi)部で Immer.js を使用します。これにより、リデューサー內(nèi)で「変異型」コードを作成できます。ただし、Immer は、狀態(tài)のコピーを自動的に作成し、それらに突然変異を適用することで、狀態(tài)が不変のままであることを保証します。

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

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

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

createAsyncThunk 関數(shù)は、複雑な非同期ロジックの管理に役立ち、それを Redux 狀態(tài)にシームレスに統(tǒng)合して、非同期操作の管理の複雑さを軽減します。

5. createEntityAdapter でデータを正規(guī)化する

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

---

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 スライスを定義します。これには、特定の狀態(tài)部分のアクションとリデューサーの両方が含まれます。

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: ストアを構(gòu)成する

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

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 狀態(tài)にアクセスします。
• useDispatch: 狀態(tài)を変更するアクションをディスパッチします。

---

5.結(jié)論

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

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

---

以上がRedux ツールキットのマスタリング: React アプリの狀態(tài)管理を簡素化するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。