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

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

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

基本用法

  1. 安装:首先,你需要安装zustand库。

    npm install zustand
    
  2. 创建一个状态存储:使用createStore函数来创建一个新的状态存储。

  3. 设置初始状态:你可以提供一个对象作为初始状态,对象的每个属性都将成为状态的一部分。

  4. 定义状态更新函数:这些函数可以修改状态存储中的状态。

  5. 使用状态:在组件中使用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>zustandcreate 函数,它被调用时使用了泛型参数 <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 }));},};
});
解释
  1. 泛型的作用

    • create<Store> 中的 <Store> 泛型不仅指定了 createUserStore 的返回值类型,也规定了回调函数参数 set 的类型。
    • set 函数的类型定义需要知道 Store 的结构,以便 TypeScript 可以正确推断 setstate 的类型。
  2. 接口的局限性

    • 如果只使用接口来定义返回值类型,会失去对 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);

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

总结

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

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

调试工具

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

在这里插入图片描述

注意事项

  • zustand的状态存储是单一的,意味着所有组件共享相同的状态副本。
  • 状态更新是响应式的,组件会在状态变化时重新渲染。
  • 状态存储的创建应该是一次性的,通常在单独的文件中进行,然后被多个组件导入和使用。

zustand是一个轻量级的状态管理解决方案,特别适合中小型项目或者需要快速设置全局状态的场景。

相关文章:

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

zustand 是一个用于React应用的简单、快速且零依赖的状态管理库。它使用简单的钩子&#xff08;hooks&#xff09;API来创建全局状态&#xff0c;使得在组件之间共享状态变得容易。 React学习Day10 基本用法 安装&#xff1a;首先&#xff0c;你需要安装zustand库。 npm insta…...

Maven 的生命周期详解

Maven 是目前最流行的项目管理和构建工具之一&#xff0c;广泛应用于 Java 开发项目中。它通过一系列约定和配置&#xff0c;极大地简化了项目的构建、依赖管理和生命周期管理。其中&#xff0c;Maven 的生命周期是其核心概念之一&#xff0c;贯穿了项目从构建、测试、打包到部…...

【稳定检索/投稿优惠】2024年生物技术与食品科学国际会议(ICBFS 2024)

2024 International Conference on Biotechnology and Food Science 2024年生物技术与食品科学国际会议 【会议信息】 会议简称&#xff1a;ICBFS 2024 大会时间&#xff1a;点击查看 截稿时间&#xff1a;点击查看 大会地点&#xff1a;中国厦门 会议官网&#xff1a;www.icb…...

iOS Category

原理&#xff1a; 【iOS】——分类、扩展和关联对象_ios 为什么分类不能加成员变量-CSDN博客 面试题&#xff1a; 1.Category和Extension区别&#xff1f; 在 Objective-C 中&#xff0c;Category 和 Extension 是两种用于向现有类添加新功能的机制&#xff0c;但它们各有特…...

5.Sentinel入门与使用

5.Sentinel入门与使用 1.什么是 Sentinel?Sentinel 主要有以下几个功能: 2.为什么需要 Sentinel?3.Sentinel 基本概念3.1 什么是流量控制?3.1.1 常见流量控制算法3.1.2 Sentinel 流量控制流控效果介绍如下: 3.2 什么是熔断?熔断策略 3.3 Sentinel 组成&#xff08;资源和规…...

上位机图像处理和嵌入式模块部署(h750 mcu和图像处理)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们说过&#xff0c;h750和之前的103、407相比较&#xff0c;本身cpu频率比较高&#xff0c;flash大小一般&#xff0c;但是ram比较大&#x…...

信创服务器操作系统的适配迁移分析

浅谈信创服务器操作系统的适配迁移 01 服务器操作系统迁移适配流程复杂 随着CentOS停服临近和红帽RHEL源码权限受限&#xff0c;服务器操作系统安全漏洞风险加剧。国内众多企业面临CentOS、REHL等系统升级替换的挑战。同时&#xff0c;出于安全、功能升级和合规需求&#xff0…...

在Ubuntu 20.04上安装和配置MySQL 8:详细指南和远程访问设置

目录 一、MySQL 8的特点和优势 二、在Ubuntu 20.04上安装MySQL 8 三、初始化MySQL 四、配置MySQL远程访问 五、 创建远程访问用户 六. 配置防火墙 七、 测试远程访问 总结 MySQL是一种开源的关系型数据库管理系统&#xff0c;被广泛应用于各种应用程序和网站中。MySQL …...

Vue43-单文件组件

一、脚手架的作用 单文件组件&#xff1a;xxx.vue&#xff0c;浏览器不能直接运行&#xff01;&#xff01;&#xff01; 脚手架去调用webpack等第三方工具。 二、vue文件的命名规则 建议用下面的两种方式。&#xff08;首字母大写&#xff01;&#xff01;&#xff01;&#x…...

如何快速使用向量检索服务DashVector?

免费体验阿里云高性能向量检索服务&#xff1a;https://www.aliyun.com/product/ai/dashvector 本文将介绍如何快速上手使用向量检索服务DashVector。 前提条件 已创建Cluster&#xff1a;创建Cluster。 已获得API-KEY&#xff1a;API-KEY管理。 已安装最新版SDK&#xff1a…...

Linux 用户和用户组 创建用户 创建组

介绍 一个组有多个用户&#xff0c;可以给组分配权限&#xff0c;那么该组的使用用户都有该组的权限&#xff0c;就不用一个个分配&#xff0c;而且很好管理。 创建用户组 groupadd 组名删除用户组 groupdel test查看用户所属组 id [用户名]修改用户组 把abc用户添加到m…...

Character Animator 2024 mac/win版:赋予角色生命,动画更传神

Character Animator 2024是一款强大的角色动画制作软件&#xff0c;以其创新的功能和卓越的性能&#xff0c;为动画师、游戏开发者以及设计师们带来了全新的创作体验。 Character Animator 2024 mac/win版获取 这款软件采用了先进的骨骼绑定技术&#xff0c;使得角色动画的制作…...

短剧app广告变现模式开发

短剧app搭建是一个涉及多个方面的复杂过程&#xff0c;下面将介绍主要的步骤和考虑因素&#xff1a; 明确目标和定位&#xff1a;在开始搭建之前&#xff0c;首先要明确你的目标受众是谁&#xff0c;以及短剧app的主要定位是什么。这有助于在后续的开发过程中更有针对性地进行…...

如何选择适合的编程语言入门?

推荐学习网站&#xff1a;offernow.cn 如何选择最适合自己的编程语言呢&#xff1f;接下来&#xff0c;我给大家分享一些实用的建议&#xff0c;希望能帮到你们。 一、明确目标和兴趣 考虑你的兴趣和未来方向是选择编程语言的首要因素。如果你对网页开发感兴趣&#xff0c;可以…...

Spring Boot入门教程

Spring Boot入门教程可以按照以下步骤进行&#xff0c;以确保清晰和有条理地学习&#xff1a; 1. Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;旨在简化Spring应用的初始搭建以及开发过程。它使用了特定的方式来进行配置&#xff0c;使开发人员不再…...

芝麻文件重命名 一键批量重命名 支持批量修改图片 文档 文件夹名称

芝麻文件重命名是一款专业的文件批量重命名软件&#xff0c;它提供了丰富的功能和灵活的命名规则&#xff0c;可以大大提高文件管理的效率。以下是关于芝麻文件重命名的详细介绍&#xff1a; 一、软件特点 支持批量重命名&#xff1a;芝麻文件重命名支持文件和文件夹的批量重命…...

docker守护进程配置代理

一&#xff1a;配置 Docker 守护进程使用代理 1.创建或编辑 Docker 配置文件目录 2.创建或编辑代理配置文件 3.重新加载系统守护进程并重启 Docker 4.验证代理设置 5.使用 docker pull 拉取镜像&#xff0c;验证代理设置 步骤 1&#xff1a;创建或编辑 Docker 配置文件目录 Doc…...

使用Minikube部署Kubernetes环境

使用Minikube部署Kubernetes环境 1. Minikube简介 Minikube是一个轻量级的Kubernetes实现&#xff0c;它在本地运行一个Kubernetes集群&#xff0c;可以是单节点或者集群环境&#xff0c;主要用于开发和测试。Minikube支持Kubernetes的所有主要功能&#xff0c;包括Dashboard…...

蚂蚁集团:2023年科研投入211.9亿元

6月13日&#xff0c;蚂蚁集团发布2023年可持续发展报告。报告显示&#xff0c;2023年蚂蚁集团科研投入达到211.9亿元&#xff0c;再创历史新高&#xff0c;蚂蚁科技投入的重点是人工智能和数据要素技术。 蚂蚁集团董事长兼CEO井贤栋在报告致辞中说&#xff0c;面向未来&#x…...

pikachu靶场之XSS漏洞测试

一、环境配置 1.pikachu官网下载 下载地址&#xff1a;https://github.com/zhuifengshaonianhanlu/pikachu 2.百度网盘&#xff08;里面含有pikachu跟phpstudy&#xff09; 链接&#xff1a;pikachu下载 密码&#xff1a;abcd 配置&#xff1a;pikachu下载及安装-图文详解…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...