当前位置：首页 > news >正文

zustand 状态管理库的使用结合TS

news 2025/7/15 6:29:56

zustand 是一个用于React应用的简单、快速且零依赖的状态管理库。它使用简单的钩子（hooks）API来创建全局状态，使得在组件之间共享状态变得容易。
React学习Day10

基本用法

安装：首先，你需要安装zustand库。
```
npm install zustand
```
创建一个状态存储：使用createStore函数来创建一个新的状态存储。
设置初始状态：你可以提供一个对象作为初始状态，对象的每个属性都将成为状态的一部分。
定义状态更新函数：这些函数可以修改状态存储中的状态。
使用状态：在组件中使用useStore钩子来访问和更新状态。

代码示例

以下是一个使用zustand的基本示例：

store / user.tsx 中创建一个状态

import { create } from "zustand";interface Store {count: number;inc: (num: number) => void;
}
// 这里的 <Store> 表示 create 函数接受一个泛型参数，这个参数是 Store 接口的类型。
const createUserStore = create<Store>((set) => {return {count: 0,inc: (num: number) => {set((state) => ({ count: state.count + num }));},};
});export default createUserStore;

在组件中使用这个状态
component / Son.tsx

import React from "react";
import createUserStore from "../store/user";  // 引入interface SonProps {data: number; changeFatherMoney: (data: number) => void; 
}const Son: React.FC<SonProps> = ({ data, changeFatherMoney }) => {const { count, inc } = createUserStore();  // 导出return (<div style={{ border: "1px red solid" }}><div>用户信息counter:{count}</div><buttononClick={() => {inc(10);}}>+10</button><p>这里是子组件</p>父亲的数据是：{data}<button onClick={() => changeFatherMoney(data - 1)}>用父亲一块钱</button></div>);
};export default Son

泛型介绍

在TypeScript中，<Store> 是一个泛型参数的表示方式。这里的 <Store> 表示 create 函数接受一个泛型参数，这个参数是 Store 接口的类型。

泛型在TypeScript中是一种强大的方式，允许你为函数、接口或类定义类型参数，这些参数在定义时不必指定具体的类型，而是在使用时指定。这样做可以提高代码的复用性和灵活性。

在你给出的示例中：

interface Store {count: number;inc: (num: number) => void;
}const createUserStore = create<Store>((set) => {return {count: 0,inc: (num: number) => {set((state) => ({ count: state.count + num }));},};
});

这里的<Store>泛型，规定了create的返回值类型，返回的状态存储对象的类型，而不是用来规定参数类型。

interface Store 定义了一个接口，其中包含一个 count 属性和一个 inc 方法。
create<Store> 是 zustand 的 create 函数，它被调用时使用了泛型参数 <Store>。这意味着 create 函数将创建一个状态存储，其形状（state shape）将由 Store 接口定义。
createUserStore 是一个函数，当调用时会返回一个符合 Store 接口的状态存储实例。

为什么在 Zustand 中使用泛型而不是接口

在 Zustand 的 create 函数中，泛型不仅用于指定返回值的类型，还用于定义函数内部 set 方法的参数类型等，这比单独使用接口来定义返回值类型更具优势。

示例代码

import { create } from "zustand";interface Store {count: number;inc: (num: number) => void;
}const createUserStore = create<Store>((set) => {return {count: 0,inc: (num: number) => {set((state) => ({ count: state.count + num }));},};
});

解释

泛型的作用：
- create<Store> 中的 <Store> 泛型不仅指定了 createUserStore 的返回值类型，也规定了回调函数参数 set 的类型。
- set 函数的类型定义需要知道 Store 的结构，以便 TypeScript 可以正确推断 set 中 state 的类型。
接口的局限性：
- 如果只使用接口来定义返回值类型，会失去对 set 函数类型的类型推断和约束。
- 接口无法单独定义 create 函数返回的回调函数 set 的参数类型。

示例：如果只用接口定义返回值类型

如果只用接口定义返回值类型，无法涵盖 set 函数类型的约束：

const createUserStore = create((set: (fn: (state: Store) => Store) => void) => {return {count: 0,inc: (num: number) => {set((state) => ({ count: state.count + num }));},};
} as Store);

这种方式缺乏泛型提供的灵活性和类型推断能力，代码变得不那么优雅，类型定义也不那么清晰。

总结

泛型用途广泛：泛型不仅可以规定返回值类型，还可以用于函数参数、类属性和方法、接口属性和方法、类型别名等。
Zustand 中使用泛型的优势：在 Zustand 的 create 函数中使用泛型，不仅规定了返回值类型，还涵盖了内部回调函数 set 的参数类型约束，使代码更加类型安全和简洁。
接口的局限性：仅使用接口来定义返回值类型，无法对函数参数类型进行全面约束，失去了泛型提供的类型推断能力。

通过使用泛型，你可以使代码更具通用性、灵活性和类型安全性，特别是在处理复杂的类型结构时。

调试工具

npm i simple-zustand-devtools -D

import create from 'zustand'// 导入核心方法
import { mountStoreDevtool } from 'simple-zustand-devtools'// 省略部分代码...// 开发环境开启调试
if (process.env.NODE_ENV === 'development') {mountStoreDevtool('channelStore', useChannelStore)
}export default useChannelStore