React Academy · 课时

创建您的第一个 Zustand Store

Q: 「创建您的第一个 Zustand Store」这节课中我会学到什么？

使用 create() 定义 Store，添加状态切片和操作，并通过 useStore 使用它。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 create() 定义 Store，添加状态切片和操作，并通过 useStore 使用它。

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

欢迎

在本课中，您将使用 create() 创建第一个 Zustand store，定义状态切片和操作，并在 React 组件中使用该 store。

什么是 Zustand？

Zustand 是一个精简且不强加特定模式的状态管理库。store 是一个包含状态和函数的普通 JavaScript 对象。组件通过钩子订阅它。不需要提供器、归约器或样板代码。

安装

请安装 Zustand。它没有对等依赖。

npm install zustand

创建 store

使用一个返回初始状态和操作的函数调用 create()。该函数会接收用于更新状态的 `set` 辅助函数。

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

在组件中使用 store

在任意组件中调用 store 钩子即可访问状态和操作。不需要使用 Provider 包裹组件。

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

选择器语法

向 store 钩子传递选择器函数，即可只订阅所需的状态切片。只有选中值发生变化时，组件才会重新渲染。

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

使用 set 更新状态

`set` 函数会以浅合并方式将新值合并到 store 中。您可以传入对象，也可以传入一个接收当前状态并返回部分更新内容的函数。

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

异步操作

操作可以是异步的。等待数据返回后调用 set。不需要使用中间件，只需编写普通的异步函数即可。

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

嵌套状态更新

对于嵌套对象，请手动展开外层，或者使用 immer 中间件执行深层变更。默认情况下，set 只会合并顶层键。

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

在 React 外部读取 store

在组件外部使用 getState() 访问 store 状态，并使用 subscribe() 订阅变化。这对于测试和非 React 代码很有用。

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

快速检查

在 Zustand store 中，set 函数的作用是什么？

回顾

使用 create((set) => ({ state, actions })) 创建 Zustand store。在组件中使用选择器语法订阅状态切片。操作会调用 set() 更新状态。它支持异步操作，也可以在 React 外部通过 getState() 使用。

接下来

下一课：**选择器与防止不必要的重新渲染**——您将提取特定的状态切片，使组件只在需要时重新渲染。

常见问题解答

「创建您的第一个 Zustand Store」课时是免费的吗？

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

「创建您的第一个 Zustand Store」这节课中我会学到什么？

使用 create() 定义 Store，添加状态切片和操作，并通过 useStore 使用它。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「创建您的第一个 Zustand Store」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy