Redux 工具包：簡(jiǎn)化 React 中的狀態(tài)管理

Redux Toolkit 是一個(gè)官方的、固執(zhí)己見(jiàn)且功能強(qiáng)大的庫(kù)，它簡(jiǎn)化了在應(yīng)用程序中設(shè)置 Redux 的過(guò)程。 Redux 雖然非常強(qiáng)大，但可能需要大量樣板代碼來(lái)處理狀態(tài)管理、操作創(chuàng)建和化簡(jiǎn)器。 Redux Toolkit (RTK) 旨在通過(guò)提供一組簡(jiǎn)化常見(jiàn)任務(wù)的實(shí)用函數(shù)來(lái)使 Redux 開(kāi)發(fā)更輕松、更高效。

使用 Redux Toolkit，您可以以更簡(jiǎn)潔、更有組織的方式配置存儲(chǔ)、編寫(xiě)減速器并定義操作。它還包括一些默認(rèn)設(shè)置，幫助開(kāi)發(fā)人員避免常見(jiàn)錯(cuò)誤和樣板代碼。

---

1.什么是 Redux 工具包？

Redux Toolkit 是官方推薦的庫(kù)，用于以更結(jié)構(gòu)化、簡(jiǎn)潔且用戶(hù)友好的方式編寫(xiě) Redux 邏輯。它通過(guò)提供降低 Redux 設(shè)置復(fù)雜性的實(shí)用程序來(lái)幫助消除對(duì)重復(fù)代碼的需求，例如自動(dòng)處理不可變狀態(tài)更新以及簡(jiǎn)化操作創(chuàng)建者和減速器。

---

2. Redux工具包的核心特性

Redux Toolkit 提供了多個(gè)內(nèi)置功能和實(shí)用程序來(lái)簡(jiǎn)化 Redux 的使用：

1.配置商店

configureStore 通過(guò)自動(dòng)添加必要的中間件（例如用于異步操作的 redux-thunk）以及設(shè)置 Redux DevTools 進(jìn)行調(diào)試來(lái)簡(jiǎn)化存儲(chǔ)配置。

示例：

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

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

export default store;

• configureStore 處理商店創(chuàng)建，與 createStore 函數(shù)相比，它更容易、更標(biāo)準(zhǔn)化。

2.創(chuàng)建切片

createSlice 是一個(gè)簡(jiǎn)化 Redux 切片創(chuàng)建的實(shí)用程序，它代表 Redux 狀態(tài)的一部分，并包含減速器和操作。

示例：

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 根據(jù)您定義的reducer 函數(shù)自動(dòng)生成動(dòng)作創(chuàng)建者 和動(dòng)作類(lèi)型。

3. createAsyncThunk

createAsyncThunk 是一個(gè)用于處理異步邏輯的工具，例如從 API 獲取數(shù)據(jù)，并將其集成到 Redux 狀態(tài)中。它生成一組操作創(chuàng)建者（待處理、已完成和拒絕狀態(tài)）來(lái)管理異步流。

示例：

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

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

export default store;

• createAsyncThunk 幫助以干凈、易于理解的方式管理 Redux 中的異步請(qǐng)求。

4.創(chuàng)建實(shí)體適配器

createEntityAdapter 是一個(gè)用于管理 Redux 中規(guī)范化數(shù)據(jù)的實(shí)用程序。它可以幫助您有效地處理數(shù)據(jù)集合，例如項(xiàng)目列表。

示例：

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 簡(jiǎn)化了數(shù)據(jù)集合（例如列表或數(shù)組）的處理，允許更輕松地管理實(shí)體，例如添加、更新或刪除數(shù)據(jù)。

---

3. Redux 工具包的優(yōu)點(diǎn)

1.更少的樣板

RTK 顯著減少了設(shè)置 Redux 所需的樣板代碼量。您現(xiàn)在可以使用 createSlice 自動(dòng)生成所有內(nèi)容，而不是手動(dòng)編寫(xiě)操作類(lèi)型、操作創(chuàng)建器和化簡(jiǎn)器。

2.不可變更新（通過(guò) Immer.js）

RTK 在底層使用 Immer.js，它允許您在減速器中編寫(xiě)“變異”代碼。然而，Immer 通過(guò)自動(dòng)創(chuàng)建狀態(tài)副本并對(duì)它們應(yīng)用突變來(lái)確保狀態(tài)保持不可變。

3.更好的開(kāi)發(fā)者體驗(yàn)

通過(guò)自動(dòng)配置 redux-thunk 等中間件并與 Redux DevTools 集成，Redux Toolkit 可以更輕松地調(diào)試和監(jiān)控 Redux 狀態(tài)。您還可以輕松使用 TypeScript 等工具，因?yàn)?RTK 為類(lèi)型安全提供了強(qiáng)大的支持。

4.簡(jiǎn)化的異步邏輯

createAsyncThunk 函數(shù)有助于管理復(fù)雜的異步邏輯，并將其無(wú)縫集成到您的 Redux 狀態(tài)中，降低管理異步操作的復(fù)雜性。

5.使用 createEntityAdapter 標(biāo)準(zhǔn)化數(shù)據(jù)

RTK 提供諸如 createEntityAdapter 之類(lèi)的實(shí)用程序來(lái)處理標(biāo)準(zhǔn)化數(shù)據(jù)。這對(duì)于在 Redux 中管理大量數(shù)據(jù)（例如用戶(hù)列表、產(chǎn)品等）特別有用。

---

4.在 React 應(yīng)用程序中設(shè)置 Redux 工具包

這是在 React 應(yīng)用程序中設(shè)置 Redux Toolkit 的基本指南。

第 1 步：安裝 Redux 工具包和 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步：創(chuàng)建切片和Reducers

使用 createSlice 定義 Redux 切片，它將包含特定狀態(tài)片段的操作和化簡(jiǎn)器。

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 步：配置商店

接下來(lái)，使用 configureStore 配置 Redux 存儲(chǔ)。

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

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

export default store;

第 4 步：在 React 組件中使用 Redux

使用react-redux 中的Provider 組件包裝您的應(yīng)用程序，以使Redux 存儲(chǔ)在您的整個(gè)應(yīng)用程序中可用。

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：訪(fǎng)問(wèn) Redux 狀態(tài)。
• useDispatch：調(diào)度操作來(lái)修改狀態(tài)。

---

5.結(jié)論

Redux Toolkit 通過(guò)刪除樣板代碼并提供 createSlice、createAsyncThunk 和 configureStore 等實(shí)用函數(shù)來(lái)簡(jiǎn)化使用 Redux 的過(guò)程。通過(guò)使用RTK，開(kāi)發(fā)者可以專(zhuān)注于應(yīng)用程序的核心邏輯，而無(wú)需擔(dān)心Redux配置的復(fù)雜性。

使用 RTK，您可以以更高效且可維護(hù)的方式管理同步和異步狀態(tài)，使其成為大型 React 應(yīng)用程序的絕佳選擇。

---

以上是掌握 Redux 工具包：簡(jiǎn)化 React 應(yīng)用程序中的狀態(tài)管理的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！