理解 Zustand：TypeScript 入门指南

状态管理是构建现代 Web 应用程序（尤其是 React 应用程序）的关键环节。虽然市面上有很多状态管理库，但 Zustand 因其简洁性和灵活性而日益流行。在这篇面向初学者的博文中，我们将探讨 Zustand 的基础知识以及如何将其与 TypeScript 结合使用。

什么是 Zustand？

Zustand 是一个轻量级、快速的 React 应用状态管理库。它的设计理念是简洁、高效、易用，对于想要寻找轻量级替代方案来取代 Redux 或 Mobx 等更复杂状态管理方案的开发者来说，Zustand 是一个绝佳的选择。

Zustand 提供了一个极简的 API 接口，并利用 React 的 Context 和 Hooks 来管理应用程序状态。这意味着您无需额外的依赖项或样板代码即可管理应用程序状态。

基本概念

以下是 Zustand 的基本概念：

店铺：

在 Zustand 中，store 是管理应用程序状态的中心位置。它本质上是一个保存数据的 JavaScript 对象。您可以将其视为应用程序状态的唯一数据源。store 使用 Zustand 提供的 create 函数创建。

状态：

Zustand 中的状态指的是您希望在应用程序中管理的数据。它是会随时间变化的信息。

操作：

Zustand 中的操作是允许您修改状态的函数。这些函数定义在 store 中，负责以受控的方式更新状态。在上面的示例中，increment 和 decrement 就是改变计数状态的操作。

钩子：

Zustand 提供了一个钩子，用于访问 React 组件中的状态和操作。这个钩子通常名为 useStore（或者你创建 store 时给它起的任何名字）。你可以使用这个钩子来访问和更新组件中的状态。

订阅：

Zustand 在处理组件重新渲染方面非常高效。当您使用 useStore hook 时，Zustand 会自动将组件订阅到所需的 state。这意味着您的组件仅在 state 的相关部分发生变化时才会重新渲染，从而减少不必要的重新渲染并提高性能。

类型安全：

Zustand 与 TypeScript 兼容性很好。您可以为状态和操作定义类型，以确保整个应用程序的类型安全，从而减少运行时错误。

中间件：

Zustand 允许您向 store 添加中间件，这有助于调试、记录日志或在状态更改传播到组件之前拦截它们。

店铺组成：

您可以为应用程序的不同部分创建多个 Zustand 存储，并根据需要将它们组合起来。这提供了一种清晰有序的方式来管理您的状态。

Zustand 和 TypeScript 入门

要开始使用 Zustand，您需要创建一个 React 项目。如果您还没有创建 React 项目，请使用 vite 创建一个新的 React 应用程序。

npm create vite@latest

接下来，安装 Zustand 作为依赖项：

npm install zustand

现在，让我们创建一个简单的示例来演示如何将 Zustand 与 TypeScript 结合使用。

示例：计数器应用程序

假设我们想用 Zustand 和 TypeScript 构建一个基本的计数器应用程序。

设置店铺：

首先，让我们设置 Zustand 商店。创建一个名为 的文件

counterStore.ts:

import { create } from 'zustand';

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

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

在这里，我们定义了一个 CounterState 接口来描述我们商店的形状，包括计数状态以及增加和减少计数的方法。

在组件中使用 Store：

现在，让我们创建一个使用 Zustand 存储的组件。在一个名为Counter.tsx:

import React from 'react';
import { useCounterStore } from './counterStore';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

在这个组件中，我们使用useCounterStorehook 来访问store 中的count状态和increment方法。decrement

使用计数器组件：

最后，让我们Counter在文件中使用我们的组件App.tsx：

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

现在，你可以使用以下命令运行你的 React 应用程序npm run dev，你将拥有一个由 Zustand 和 TypeScript 驱动的可用计数器应用程序。

结论

我们刚刚使用了 Zustand，一个轻量级的 React 状态管理库，并演示了如何将其与 TypeScript 结合使用。Zustand 的简洁性和高效性使其成为 React 应用状态管理的理想选择，尤其适合想要避免其他状态管理方案复杂性的初学者。祝您编码愉快！