面试官：Redux-Toolkit 是什么

Redux Toolkit（RTK）是 Redux 官方推荐的 状态管理库，它简化了 Redux 的开发流程，使 Redux 更简单、更高效。

 为什么需要 Redux Toolkit？

• 简化 Redux 代码（减少 boilerplate 代码）

• 自动优化状态更新（内置 Immer.js，支持 可变写法）

• 内置异步处理（Redux Thunk）

• 性能优化（自动 reducer 组合，支持 lazy loading）

Redux Toolkit vs 传统 Redux

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 的现代化解决方案，推荐用于 React + Redux 开发！