TypeScript Academy · 课时

为 Redux Toolkit 切片与 Thunk 添加类型

Q: 「为 Redux Toolkit 切片与 Thunk 添加类型」这节课中我会学到什么？

使用 createSlice 和 createAsyncThunk 实现完整的类型推断 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 createSlice 和 createAsyncThunk 实现完整的类型推断

为 Redux Toolkit 切片与 Thunk 添加类型 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

为什么要为 Redux Toolkit 添加类型？

Redux Toolkit（RTK）提供了出色的 TypeScript 支持。正确的类型定义可以确保操作、state 和异步 thunk 都具备类型安全性，而无需手动进行类型断言。

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

为 State 接口添加类型

请在创建切片之前，将切片的 state 定义为 TypeScript 接口。

interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  loading: false,
  error: null,
};

使用带类型的 createSlice

请将 state 类型作为泛型传入，以确保 reducer 接收类型正确的 state。

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoading(state, action: PayloadAction<boolean>) {
      state.loading = action.payload; // state: UserState — typed
    },
  },
});

PayloadAction 类型定义

请使用 RTK 中的 PayloadAction，为 reducer 中的 action.payload 添加类型。

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

reducers: {
  addUser(state, action: PayloadAction<User>) {
    state.users.push(action.payload); // action.payload: User
  },
}

使用类型创建 createAsyncThunk

请为返回值、thunk 参数和 thunk API 配置提供类型。

const fetchUsers = createAsyncThunk<User[], void, { rejectValue: string }>(
  "users/fetchAll",
  async (_, { rejectWithValue }) => {
    try {
      return await api.getUsers();
    } catch (e) {
      return rejectWithValue("Failed to fetch");
    }
  }
);

在 extraReducers 中处理 Thunk 操作

请使用 builder 回调 API，以完全类型安全的方式处理待处理、已完成和已拒绝的 thunk 操作。

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.users = action.payload; // action.payload: User[]
        state.loading = false;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.error = action.payload ?? "Unknown error";
      });
  },
});

带类型的 RootState 和 AppDispatch

请从 store 文件中导出带类型的 RootState 和 AppDispatch，以便在选择器和钩子中使用。

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({ reducer: { users: userSlice.reducer } });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

带类型的 useSelector 和 useDispatch

请创建带类型的 Redux 钩子版本，避免在每个组件中重复进行类型断言。

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

RTK Query 类型定义

RTK Query 会根据端点定义生成完全带类型的钩子，无需手动为响应添加类型。

const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => `/users/${id}`,
    }),
  }),
});
export const { useGetUserQuery } = api;

选择器类型定义

请使用 RootState 编写带类型的选择器，以确保类型安全地访问 state。

const selectUsers = (state: RootState): User[] => state.users.users;
const selectLoading = (state: RootState): boolean => state.users.loading;

回顾：类型化 RTK

Redux Toolkit TypeScript：定义 state 接口，在 reducer 中使用 PayloadAction，为 createAsyncThunk 泛型添加类型，导出 RootState 和 AppDispatch，并创建带类型的钩子封装器。

快速检查

哪种类型注解可以让 RTK reducer 中的 action.payload 具备类型安全性？

您学到了什么

Redux Toolkit TypeScript：定义切片 state 接口，在 reducer 中使用 PayloadAction，为 createAsyncThunk 指定三个泛型，并导出带类型的 RootState/AppDispatch，同时为组件使用创建钩子封装器。

常见问题解答

「为 Redux Toolkit 切片与 Thunk 添加类型」课时是免费的吗？

是的 — 「为 Redux Toolkit 切片与 Thunk 添加类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「为 Redux Toolkit 切片与 Thunk 添加类型」这节课中我会学到什么？

使用 createSlice 和 createAsyncThunk 实现完整的类型推断你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「为 Redux Toolkit 切片与 Thunk 添加类型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy