面试官：Redux-Toolkit 是什么，你知道吗？-51CTO.COM

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 开发！