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

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

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

---

1.什么是 Redux 工具包？

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

---

2. Redux工具包的核心特性

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

1.配置商店

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

示例：

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 是一個簡化 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ù)自動生成動作創(chuàng)建者 和動作類型。

3. createAsyncThunk

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

示例：

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

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

export default store;

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

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

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

---

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

1.更少的樣板

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

2.不可變更新（通過 Immer.js）

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

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

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

4.簡化的異步邏輯

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

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

RTK 提供諸如 createEntityAdapter 之類的實(shí)用程序來處理標(biāo)準(zhǔn)化數(shù)據(jù)。這對于在 Redux 中管理大量數(shù)據(jù)（例如用戶列表、產(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)片段的操作和化簡器。

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 組件包裝您的應(yīng)用程序，以使Redux 存儲在您的整個應(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：訪問 Redux 狀態(tài)。
• useDispatch：調(diào)度操作來修改狀態(tài)。

---

5.結(jié)論

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

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

---

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