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

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

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

---

1.什麼是 Redux 工具包？

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

---

2. Redux工具包的核心特性

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

1.配置商店

configureStore 透過自動(dòng)新增必要的中間件（例如用於非同步操作的 redux-thunk）以及設(shè)定 Redux DevTools 進(jìn)行偵錯(cuò)來簡化儲(chǔ)存配置。

範(fàn)例：

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.建立切片

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

範(fàn)例：

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 會(huì)根據(jù)您定義的reducer 函數(shù)自動(dòng)產(chǎn)生動(dòng)作建立者 和動(dòng)作類型。

3. createAsyncThunk

createAsyncThunk 是一個(gè)用於處理非同步邏輯的工具，例如從 API 取得數(shù)據(jù)，並將其整合到 Redux 狀態(tài)中。它會(huì)產(chǎn)生一組操作創(chuàng)建者（待處理、已完成和拒絕狀態(tài)）來管理非同步流程。

範(fàn)例：

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

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

export default store;

• createAsyncThunk 協(xié)助以乾淨(jìng)、易於理解的方式管理 Redux 中的非同步請(qǐng)求。

4.建立實(shí)體適配器

createEntityAdapter 是一個(gè)用於管理 Redux 中規(guī)範(fàn)化資料的實(shí)用程式。它可以幫助您有效地處理資料集合，例如項(xiàng)目清單。

範(fàn)例：

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í)體，例如新增、更新或刪除資料。

---

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

1.更少的樣板

RTK 顯著減少了設(shè)定 Redux 所需的樣板程式碼量?，F(xiàn)在您可以使用 createSlice 自動(dòng)產(chǎn)生所有內(nèi)容，而不是手動(dòng)編寫操作類型、操作建立器和化簡器。

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

RTK 在底層使用 Immer.js，它允許您在減速器中編寫「變異」程式碼。然而，Immer 透過自動(dòng)建立狀態(tài)副本並對(duì)它們應(yīng)用突變來確保狀態(tài)保持不可變。

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

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

4.簡化的非同步邏輯

createAsyncThunk 函數(shù)有助於管理複雜的非同步邏輯，並將其無縫整合到您的 Redux 狀態(tài)中，降低管理非同步操作的複雜性。

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

RTK 提供諸如 createEntityAdapter 之類的實(shí)用程式來處理標(biāo)準(zhǔn)化資料。這對(duì)於在 Redux 中管理大量資料（例如使用者清單、產(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：建立切片和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 步：設(shè)定商店

接下來，使用 configureStore 設(shè)定 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：存取 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配置的複雜性。

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

---

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