掌握 Redux 工具包：簡化 React 應用程式中的狀態管理

Redux 工具包：簡化 React 中的狀態管理

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

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

---

1.什麼是 Redux 工具包？

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

---

2. Redux工具包的核心特性

Redux Toolkit 提供了多個內建功能和實用程式來簡化 Redux 的使用：

1.配置商店

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 是一個簡化 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 會根據您定義的reducer 函數自動產生動作建立者 和動作類型。

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 是一個用於管理 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 狀態。您也可以輕鬆使用 TypeScript 等工具，因為 RTK 為類型安全提供了強大的支援。

4.簡化的非同步邏輯

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

5.使用 createEntityAdapter 標準化數據

RTK 提供諸如 createEntityAdapter 之類的實用程式來處理標準化資料。這對於在 Redux 中管理大量資料（例如使用者清單、產品等）特別有用。

---

4.在 React 應用程式中設定 Redux 工具包

這是在 React 應用程式中設定 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 切片，它將包含特定狀態片段的操作和化簡器。

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中文網其他相關文章！