面試官：Redux-Toolkit 是什么，你知道嗎？

作者：dev 2025-03-05 00:00:00

Redux Toolkit（RTK）是 Redux 官方推薦的狀態管理庫，它簡化了 Redux 的開發流程，使 Redux 更簡單、更高效。

?? 為什么需要 Redux Toolkit？

簡化 Redux 代碼（減少 boilerplate 代碼）
自動優化狀態更新（內置 Immer.js，支持可變寫法）
內置異步處理（Redux Thunk）
性能優化（自動 reducer 組合，支持 lazy loading）

?? Redux Toolkit vs 傳統 Redux

?? 特性	傳統 Redux	Redux Toolkit
Reducer 書寫	需要手寫 `switch-case`	直接用 `createSlice`
異步處理	需手寫 `redux-thunk`	內置 `createAsyncThunk`
狀態更新	需手寫不可變數據更新	支持可變寫法（`Immer.js`）
Store 配置	需手寫 `combineReducers`、`applyMiddleware`	`configureStore` 自動配置
默認優化	需手動優化性能	自動優化（`reselect`、`RTK Query`）

?? Redux Toolkit 基本使用

1?? 安裝 Redux Toolkit

npm install @reduxjs/toolkit react-redux

2?? 創建 store

?? 使用 configureStore 代替 createStore：

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

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

? configureStore 自動整合 Reducer、Middleware，不需要手動配置。

3?? 創建 slice（Reducer + Action）

?? 傳統 Redux 需要寫 action + reducer，而 createSlice 一步搞定！

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; }, // ? 直接修改 state（內部使用 `Immer.js`）
    decrement: (state) => { state.value -= 1; },
    addByAmount: (state, action) => { state.value += action.payload; },
  },
});

// 導出 Actions
export const { increment, decrement, addByAmount } = counterSlice.actions;

// 導出 Reducer
export default counterSlice.reducer;

? 優勢：

**自動生成 action**（無需手寫 type）
支持可變寫法（內部使用 Immer.js）

4?? 組件中使用 Redux

?? 使用 useSelector 讀取 Redux 狀態

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, addByAmount } from "./counterSlice";

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(addByAmount(5))}>+5</button>
    </div>
  );
}

export default Counter;

? 簡潔易懂！不需要 connect，直接 useSelector 讀取狀態，dispatch 觸發更新。

?? Redux Toolkit 處理異步請求

?? 使用 createAsyncThunk 處理異步請求

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

// 創建異步 Action（自動處理 `pending`, `fulfilled`, `rejected`）
export const fetchData = createAsyncThunk("data/fetchData", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return await response.json();
});

const dataSlice = createSlice({
  name: "data",
  initialState: { item: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => { state.loading = true; })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = false;
        state.item = action.payload;
      })
      .addCase(fetchData.rejected, (state) => { state.loading = false; });
  },
});

export default dataSlice.reducer;

?? 組件中使用異步 Action

import { useSelector, useDispatch } from "react-redux";
import { fetchData } from "./dataSlice";

function DataComponent() {
  const { item, loading } = useSelector(state => state.data);
  const dispatch = useDispatch();

  return (
    <div>
      {loading ? <p>Loading...</p> : <p>Data: {item?.title}</p>}
      <button onClick={() => dispatch(fetchData())}>Fetch Data</button>
    </div>
  );
}

? 優勢：

createAsyncThunk 自動管理 loading 狀態
不需要手寫 redux-thunk
extraReducers 處理異步狀態，代碼更清晰

?? Redux Toolkit 還提供的高級功能

1?? RTK Query（數據請求 & 緩存）

?? 自動管理 API 數據請求、緩存、狀態

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// 創建 API Slice
export const postApi = createApi({
  reducerPath: "postApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://jsonplaceholder.typicode.com" }),
  endpoints: (builder) => ({
    getPosts: builder.query({ query: () => "/posts" }),
  }),
});

// 自動生成 Hooks
export const { useGetPostsQuery } = postApi;

?? 組件中直接調用 API

const { data, error, isLoading } = useGetPostsQuery();

? 優勢：

自動緩存數據，避免重復請求
支持 realtime polling（輪詢）
支持 WebSocket 訂閱

?? 總結

Redux Toolkit 優勢	? 優化點
簡化 Redux 代碼	`createSlice` 代替 `reducer + action`，減少 `boilerplate`
自動優化 `store`	`configureStore` 自動組合 `reducer`，優化 `middleware`
支持可變寫法	內置 `Immer.js`，`state` 可直接修改
內置異步處理	`createAsyncThunk` 代替 `redux-thunk`，管理 `loading`
支持 API 緩存	`RTK Query` 自動緩存 API 請求數據
提高性能	`reselect` + 自動 `memoization`，避免無效渲染

?? Redux Toolkit 是 Redux 的現代化解決方案，推薦用于 React + Redux 開發！

責任編輯：武曉燕來源：大遷世界