react18使用Zustand store

Zustand 是一个轻量且易于使用的状态管理库，适用于 React 应用。它提供了简单而强大的 API 来管理全局状态，并且与 React 的开发体验非常契合。下面我们将通过一个具体的案例来探讨 Zustand 的使用，并解释其优势。

---

🧩 什么是 Zustand？

Zustand 是一个基于 React Hook 的状态管理解决方案，由 Pinecone 团队开发。它的核心思想是将状态存储在一个中央化的 store 中，并通过简单的 API 提供状态的读取和更新。

Zustand 的特点包括：

• 轻量级：体积小，无依赖。
• 高性能：自动优化 re-render，避免不必要的更新。
• 易用性：API 简洁，学习曲线低。
• 中间件支持：如持久化、日志等。
• TypeScript 支持良好：类型推导友好，开箱即用。

---

🛠️ 使用 Zustand 的步骤

我们以一个计数器应用为例，展示如何使用 Zustand 来管理状态。

1. 安装 Zustand

npm install zustand

或者使用 yarn：

yarn add zustand

2. 创建 Store

在 src/stores/counterStore.ts 中创建一个计数器 store：

import { create } from "zustand";

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

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

export default useCounterStore;

3. 在组件中使用 Store

在 src/components/CounterComponent.tsx 中使用该 store：

import React from "react";
import useCounterStore from "../stores/counterStore";

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;

4. 在页面中集成组件

在 src/pages/HomePage.tsx 中使用 Counter 组件：

import React from "react";
import Counter from "../components/CounterComponent";

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>欢迎来到首页</h1>
      <Counter />
    </div>
  );
};

export default HomePage;

---

✅ Zustand 的优势总结

特性	描述
简洁 API	只需 create 函数即可定义 store，无需复杂的 reducer 或 action。
无需 Provider	不需要像 Redux 那样包裹整个应用，直接导入 store 即可使用。
良好的 TypeScript 支持	类型推导清晰，接口定义明确。
性能优化	Zustand 自动优化组件更新，避免不必要的 re-render。
中间件扩展	支持持久化、日志、异步操作等中间件。

---

💡 高级用法示例：持久化状态

你可以使用 zustand/middleware 中的 persist 来实现状态持久化（例如保存到 localStorage）：

import { create } from "zustand";
import { persist } from "zustand/middleware";

interface UserState {
  username: string | null;
  login: (name: string) => void;
  logout: () => void;
}

const useUserStore = create<UserState>(
  persist(
    (set) => ({
      username: null,
      login: (name) => set({ username: name }),
      logout: () => set({ username: null }),
    }),
    {
      name: "user-storage", // key in localStorage
    }
  )
);

export default useUserStore;

---

📚 结语

Zustand 是一个非常适合现代 React 应用的状态管理工具，尤其适合中小型项目或希望快速上手状态管理的开发者。它不仅简化了状态管理流程，还保持了 React 的响应式特性，使得状态共享更加直观和高效。