面试官：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 基本使用

安装 Redux Toolkit

npm install @reduxjs/toolkit react-redux

创建 store

使用 configureStore 代替 createStore：

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

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

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

创建 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）

组件中使用 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 还提供的高级功能

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