TypeScript Academy · 课时

Zustand Store 类型模式

使用接口和操作定义带类型的 Zustand Store

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

为什么要为 Zustand 添加类型？

Zustand 是一个简洁的状态管理库。通过正确集成 TypeScript，您无需样板代码即可获得类型安全的 store 读取、操作和选择器。

import { create } from "zustand";

基本的带类型 store

请定义 store 接口，并将其作为泛型传入 create。

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

读取 Store State

请将选择器与钩子结合使用，以读取特定的 state 切片。TypeScript 会根据选择器推断返回类型。

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

拆分 State 与 Actions

一种常见模式是在接口中将 state 属性与操作方法分开，以便更清晰地组织代码。

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Zustand 中的异步操作

Zustand 原生支持异步操作——只需在创建器中将操作函数声明为异步函数即可。

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

immer 中间件类型定义

请使用 Zustand 的 immer 中间件，以可变风格的方式更新数据。store 类型会正确传递。

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

开发者工具中间件

将 devtools 与正确的类型定义结合使用，即可启用 Redux DevTools 支持，同时保持类型完整。

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

持久化 store 的类型定义

persist 中间件会将 state 序列化到 localStorage。请使用部分 state 接口为其正确添加类型。

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

带类型的切片模式

对于大型 store，请拆分为带类型的切片，并在一次 create 调用中将它们组合起来。

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

在 React 外部订阅

请使用带类型的 store API，在 React 组件外部访问 store state 并订阅变更。

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

回顾：Zustand 类型定义

Zustand 类型定义：定义 store 接口，将其传入 create，使用选择器读取带类型的 state，并通过柯里化模式添加中间件（immer、devtools、persist），以确保类型正确传递。

快速检查

在组件中，如何读取 Zustand state 的特定部分，同时避免因无关变更而重新渲染？

您学到了什么

将接口泛型传入 create，即可为 Zustand store 添加类型。请使用选择器函数高效且类型安全地读取 state。通过 Zustand 的柯里化模式组合 immer、devtools 和 persist 等中间件，以确保 TypeScript 正确推断类型。

常见问题解答

「Zustand Store 类型模式」课时是免费的吗？

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

「Zustand Store 类型模式」这节课中我会学到什么？

使用接口和操作定义带类型的 Zustand Store 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「Zustand Store 类型模式」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy