当前位置: 首页 > 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后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...