一个比RTK或redux更轻量级更易使用的 React 第三方状态管理工具库的配置与使用

devtools/2024/12/28 23:51:57/

本文由作者 Samdy_Chan 原创,未经作者同意,请勿随意转载!

zustand__1">使用轻量级第三方的 React 状态管理zustand 管理共享状态数据

  在 react 框架应用中,开发者应该大多数都是采用 redux 状态管理工具库来管理应用的共享状态数据,但用过 redux 的人都知道,其配置和使用相当复杂繁琐,先要定义对应操作状态数据方法的 action,然后创建 reducer 函数,在函数内要分别根据不同 action 对状态数据做不同的操作,还要根据 reducer 创建 store 对象,如果对于异步操作的 action,还需要安装第三方支持异步 action 的中间件库 redux-thunk,使用和配置起来非常麻烦。

  虽然后来出现了精简版的 redux 状态管理库:@reduxjs/toolkit(RTK),对其之前使用原始 redux 库的配置和操作进行了精简处理,而且不用再自己手动安装用于支持异步 action 的 redux-thunk 库,安装时,其会自动安装 redux-thunk 库。也无须开发者自己手动配置和注册 redux-thunk,其使用步骤精简了不少。但一般来说,对于异步 action 函数还是需要和同步 action 进行分别定义,然后在异步 action 里再调用同步 action。

  所以现在,给大家推荐一个更加轻量级的,速度更快的,配置简单,对 TS 类型支持友好的另一个第三方状态数据管理工具库 zustand,目前最新版本为 5.0.2,是一个塞尔维亚人开发。zustand 库目前周下载量达到300多400万次,基本与 redux 库下载量持平
<a class=zustand周下载量">

zustand状态管理库的主要优点如下:

  • 将状态变量(当前也是自带响应式的),及操作状态变量的 action 函数在同一个返回对象中定义;
  • 对于异步 action 函数,没有任何区别,也是在一起定义即可,无须像redux 那样分别定义;
  • 在定义状态变量的 action 函数的同一个返回对象中,可以同时定义多个状态变量,以及对应多个操作状态变量的 action 函数;
  • 也可以分模块,将不同模块或功能的状态变量及其对应的 action 函数定义在不同的 store 文件中,再通过组合导出;
  • zustand 同时也支持通过调用 zustand/middleware 中间件函数 devtools(),将操作状态数据的过程和结果在浏览器的调试工具栏(F12)中的 redux devtools 插件面板中显示出来,前提是要先安装有 redux devtools 该浏览器插件,如下图所示:
    <a class=redux调试工具图">

   即使没有安装该插件,也不影响使用;

zustand__22">zustand 的安装配置及使用说明

zustand_24">一、安装 zustand

# yarn 推荐用 yarn,就因为 react 和 yarn 都是 Facebook Meta 公司开发的,哈哈^_^
yarn add zustand# npm
npm i zustand# pnpm 
pnpm add zustand

zustand_store_38">二、配置和使用 zustand store:分模块配置

  • 2.1、本案例创建两个 store 模块文件,分别为实现年龄计数器状态数据和对应操作增减年龄状态数据 action 方法的 store;及通过异步 action 获取频道列表数据保存到 channelList 状态变量的 store。分别定义在 src/store/counterStore.ts 及 src/store/channelStore.ts 文件中,这两个 store 的定义脚本内容如下:
  • 2.1.1、<src/store/counterStore.ts>

// src/store/counterStore.ts// 导入 zustand 状态管理库创建 store 的方法 create
import { create } from 'zustand';// 定义counterStore(包括状态变量和操作方法)的数据类型
export type CounterStoreType = {count: number;incrCount: Function;decrCount: (val?: number) => void;asyncIncrCount: () => Promise<void>;
};// 创建并导出 counter 模块的 store 对象
export const useCounterStore = create<CounterStoreType>((set, get) => {// zustand.create 方法的回调函数需要返回一个包含初始化状态数据和操作状态数据方法的对象return {// 初始化状态数据count: 0,// 增加状态数据的方法incrCount: () => {// 如果需要引用原本 state 状态 count 的值,set 函数里需要传入 stateset((state) => ({ count: state.count + 1 }));

http://www.ppmy.cn/devtools/146235.html

相关文章

【Golang 面试题】每日 3 题(五)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

【设计模式】命令模式

什么是命令模式 命令模式是一种行为型设计模式。 它可将请求转换为一个包含与请求相关的所有信息的独立对象。 该转换让你能根据不同的请求将方法参数化、 延迟请求执行或将其放入队列中&#xff0c; 且能实现可撤销操作。 例如你正在开发一款新的文字编辑器&#xff0c; 包含…

React 组件中 State 的定义、使用及正确更新方式

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容React 组件中 State 的定义、使用及正确更新方式 前言 在 React 应用开发中&#xff0c;state …

R语言的数据类型

标题&#xff1a;《探索R语言数据类型的奥秘》 引言&#xff1a; 在统计学和数据分析的世界里&#xff0c;R语言无疑是一颗璀璨的明星。它以其强大的数据处理能力和丰富的图形展示功能而受到广泛欢迎。然而&#xff0c;要熟练掌握并高效使用R语言&#xff0c;深入了解其数据类…

Linux应用软件编程-多任务处理(进程)

多任务&#xff1a;让系统具备同时处理多个事件的能力。让系统具备并发性能。方法&#xff1a;进程和线程。这里先讲进程。 进程&#xff08;process&#xff09;&#xff1a;正在执行的程序&#xff0c;执行过程中需要消耗内存和CPU。 进程的创建&#xff1a;操作系统在进程创…

SQL-leetcode-180. 连续出现的数字

180. 连续出现的数字 表&#xff1a;Logs -------------------- | Column Name | Type | -------------------- | id | int | | num | varchar | -------------------- 在 SQL 中&#xff0c;id 是该表的主键。 id 是一个自增列。 找出所有至少连续出现三次的数字。 返回的…

DocFlow票据AI自动化处理工具,提升企业票据数字化管理效能

随着全球化与信息化进程&#xff0c;企业的文件、信息、数据吞吐量不断增长&#xff0c;2020年以来&#xff0c;业务形势的变革再次加速了企业对先进的文档数字化管理解决方案需求。其中&#xff0c;票据处理始终面临着文件量大耗时、单据高度多样化、“淡旺季”周期波动性强、…

.NET周刊【12月第3期 2024-12-15】

国内文章 重磅推出 Sdcb Chats&#xff1a;一个全新的开源大语言模型前端 https://www.cnblogs.com/sdcb/p/18597030/sdcb-chats-intro Sdcb Chats是一个新推出的开源大语言模型前端&#xff0c;旨在提升用户交互体验&#xff0c;并填补市场上基于.NET的前端空白。它引入树状…