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

react中使用redux最简单最方便的方式,配合rematch简化操作,5分钟学会

react中使用状态管理的方式也很多,比如redux和mobx等,今天这一片就讲一下redux的入门到熟练使用,主要是要理解它redux的组成有哪些,到怎么创建,和组建中怎么使用三个问题。这里先放上官网文档,不理解的地方可以看看官方文档:

redux官方文档:Redux 中文文档 · Redux

rematch文档:Installation | Rematch

第一步,创建一个简单的react项目

我这里使用vite直接创建了一个最简单的react项目,vite相比webpack还是简单了,vite官网:开始 | Vite 官方中文文档。 使用命令:

npm create vite

然后输入项目名和选择的框架等就可以了: 

开始 | Vite 官方中文文档。 使用命令:

第二步,安装redux和相关依赖

安装redux和react-redux:

npm install --save redux// 依赖包
npm install --save react-redux

安装@rematch/corn:

npm install @rematch/core

第三步,创建store和使用store

在项目目录下面创建一个store文件夹,然后管理状态:

创建store的前提是先创建有model,model是管理不同的数据状态的最小模块 ,比如user,game,good等不同的模块存储不同的数据状态。model长什么样呢?里面的name,state,reducers,effets都是干什么的呢?

  • state:

    • 存放模块状态的地方。
  • reducers:

    • 改变store状态的地方,每个reducers函数都会返回一个对象作为模块最新的state。
    • reducers中的函数必须为同步函数,如果要异步处理数据需要在effects中处理。
    • 注意:只能通过在reducers的函数中通过返回一个新的对象来改变模块中state的值,直接通过修改state的方式是是不能改变模块的state的值。例:
          increment(state, num1) {  state.num = num1  // 这样的写法是错误的},
    
  • effects:

    • 处理异步数据的地方,比如:异步从服务端获取数据。
    • 注意:在effects中是不能修改模块的state,需要在异步处理完数据后调用reducers中的函数修改模块的state。
  • rematch的state、reducers、effects和vuex的state、mutaition、action用法非常相似,在vuex中mutation修改model的state的值,action进行异步处理数据。

下面是一个我写的用户模块:

export default {// model名字name: 'user',// 默认初始状态state: {userName: '用户名',age: 0},reducers: {setUser(state: any, name: any, age: any) {return {...state,userName: name,age: age}}},effects: (dispatch: any) => ({async getInfoAsync(userId: any, rootState: any) {//   模拟调用服务器数据console.log('用户信息', userId, rootState)//   模拟服务器请求两秒后await new Promise((resolve) => setTimeout(resolve, 2000))// 使用this.调用的方式:ts会报错的,所以推荐使用下面的dispatch调用// this.increment()// 使用dispatch调用dispatch.user.setUser('王思聪', 38)}})
}

有了model,就可以创建store了,store怎么创建呢?里面的models是干什么的呢?

初始化store的时候rematch支持传入多个模块,在中、大型项目中可以根据业务的需要,拆分成多个模块,这样项目的结果就会变得清晰明了,所以store里面的models可以存储好多个模块:

import { init } from '@rematch/core'
import user from './user'const store = init({models: {user}
})export default store

最后还需要将store挂载到App根节点上:这样下面的所有子组件就可以使用store了

 

第四步,组建中使用和修改store状态

在子组件中使用store的方式:使用hooks的方式会很方便

import { useSelector, useDispatch } from 'react-redux'
import './App.css'function App() {// 使用hooks的方式引用数据和修改数据:user就是不同的模块const userStore = useSelector((state: any) => state.user)const dispatch = useDispatch().userconst setUser = () => {console.log('修改用户名', dispatch)// 调用异步函数修改dispatch.getInfoAsync('123')}return (<><div className='app-main'><div><span>用户名:</span>{userStore.userName}</div><div><span>年龄:</span>{userStore.age}</div>{/* 点击修改年龄 */}<div><button onClick={setUser}>修改store信息</button></div></div></>)
}export default App

第五步,安装redux-devtools协助开发

使用redux-devtools可以很方便的管理和查看redux里面的数据结构和状态:

 

redux总结 

省略了action types

不必再多次写字符串,使用model/method代替

省略了action creators

直接调用方法,不必再生产action type(原版dispatch方法返回{type, payload}),使用dispatch.model.method代替

省略了switch语句

调用model.method方法,不必判断action type ( 原本reduces中)

集中书写状态,同步和异步方法

在一个model中使用state,reducers和effects来写状态,同步和异步方法

相关文章:

react中使用redux最简单最方便的方式,配合rematch简化操作,5分钟学会

react中使用状态管理的方式也很多&#xff0c;比如redux和mobx等&#xff0c;今天这一片就讲一下redux的入门到熟练使用&#xff0c;主要是要理解它redux的组成有哪些&#xff0c;到怎么创建&#xff0c;和组建中怎么使用三个问题。这里先放上官网文档&#xff0c;不理解的地方…...

vmware安装中标麒麟高级服务器操作系统软件 V7.0操作系统

vmware安装中标麒麟高级服务器操作系统软件 V7.0操作系统 1、下载中标麒麟高级服务器操作系统软件 V7.0镜像2、安装中标麒麟高级服务器操作系统软件 V7.0操作系统 1、下载中标麒麟高级服务器操作系统软件 V7.0镜像 官方提供使用通道 访问官网 链接: https://www.kylinos.cn/ 下…...

OpenCV | 霍夫变换:以车道线检测为例

霍夫变换 霍夫变换只能灰度图&#xff0c;彩色图会报错 lines cv2.HoughLinesP(edge_img,1,np.pi/180,15,minLineLength40,maxLineGap20) 参数1&#xff1a;要检测的图片矩阵参数2&#xff1a;距离r的精度&#xff0c;值越大&#xff0c;考虑越多的线参数3&#xff1a;距离…...

【C#与Redis】--目录

1. 介绍 2. Redis 数据结构 3. Redis 命令 3.1 基本命令 3.2 字符串命令 3.3 哈希命令 3.4 列表命令 3.5 集合命令 3.6 有序集合命令 4. C# 操作 Redis 4.1 使用 Redis 库 4.2 连接 Redis 服务器 4.3 操作 Redis 数据结构 4.5 执行 Redis 命令 5. 高级主题 5.1 Redis 事…...

html旋转相册

一、实验题目 做一个旋转的3d相册&#xff0c;当鼠标停留在相册时&#xff0c;相册向四面散开 二、实验代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" con…...

Plantuml之对象图语法介绍(十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

深度学习(八):bert理解之transformer

1.主要结构 transformer 是一种深度学习模型&#xff0c;主要用于处理序列数据&#xff0c;如自然语言处理任务。它在 2017 年由 Vaswani 等人在论文 “Attention is All You Need” 中提出。 Transformer 的主要特点是它完全放弃了传统的循环神经网络&#xff08;RNN&#x…...

R语言中的函数28:Reduce(), Filter(), Find(), Map(), Negate(), Position()

文章目录 介绍Reduce()实例 Filter()实例 Find()实例 Map()实例 Negate()实例 Position()实例 介绍 R语言中的Reduce(), Filter(), Find(), Map(), Negate(), Position()是base包中的一些高级函数。随后&#xff0c;很多包也给这些函数提供了更多的扩展。 Reduce() 该函数根…...

RTP/RTCP/RTSP/SIP/SDP/RTMP对比

RTP&#xff08;Real-time Transport Protocol&#xff09;是一种用于实时传输音频和视频数据的协议。它位于传输层和应用层之间&#xff0c;主要负责对媒体数据进行分包、传输和定时。 RTCP&#xff08;Real-Time Control Protocol&#xff09;是 RTP 的控制协议&#xff0c;…...

Centos安装vsftpd:centos配置vsftpd,ftp报200和227错误

一、centos下载安装vsftpd&#xff08;root权限&#xff09; 1、下载安装 yum -y install vsftpd 2、vsftpd的配置文件 /etc/vsftpd.conf 3、备份原来的配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.backup 4、修改配置文件如下&#xff1a;vi /etc/vsftpd.conf …...

软件测试职业规划

软件测试人员的发展误区【4】 公司开发的产品专业性较强&#xff0c;软件测试人员需要有很强的专业知识&#xff0c;现在软件测试人员发展出现了一种测试管理者不愿意看到的景象&#xff1a; 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发)&#xff1b; 2、业务…...

C语言数据结构

C 语言是一种强大的编程语言&#xff0c;它提供了许多数据结构的实现。在本文档中&#xff0c;我们将讨论一些常见的数据结构&#xff0c;并提供相应的代码示例。 数组&#xff08;Array&#xff09; 数组是一种线性数据结构&#xff0c;它可以存储相同类型的元素。数组的大小…...

PHP之Trait理解, Trait介绍

一、来源 自 PHP 5.4.0 起&#xff0c;PHP 实现了一种代码复用的方法&#xff0c;称为 trait。 Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制。Trait 为了减少单继承语言的限制&#xff0c;使开发人员能够自由地在不同层次结构内独立的类中复用 method。Trait 和…...

SpringMVC:执行原理详解、配置文件和注解开发实现 SpringMVC

文章目录 SpringMVC - 01一、概述二、SpringMVC 执行原理三、使用配置文件实现 SpringMVC四、使用注解开发实现 SpringMVC1. 步骤2. 实现 五、总结注意&#xff1a; SpringMVC - 01 一、概述 SpringMVC 官方文档&#xff1a;点此进入 有关 MVC 架构模式的内容见之前的笔记&a…...

增量式旋转编码器在STM32平台上的应用

背景 旋钮是仪器仪表上一种常见的输入设备&#xff0c;它的内部是一个旋转编码器&#xff0c;知乎上的这篇科普文章对其工作原理做了深入浅出的介绍。 我们公司的功率分析仪的前面板也用到了该类设备&#xff0c;最近前面板的MCU从MSP430切换成了STM32&#xff0c;因此我要将…...

INFINI Gateway 如何防止大跨度查询

背景 业务每天生成一个日期后缀的索引&#xff0c;写入当日数据。 业务查询有时会查询好多天的数据&#xff0c;导致负载告警。 现在想对查询进行限制–只允许查询一天的数据&#xff08;不限定是哪天&#xff09;&#xff0c;如果想查询多天的数据就走申请。 技术分析 在每…...

【模式识别】探秘分类奥秘:最近邻算法解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《模式之谜 | 数据奇迹解码》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 &#x1f30c;1 初识模式识…...

【Redis】分布式锁

目录 分布式锁分布式锁实现的关键 Redisson实现分布式锁看门狗机制 分布式锁 为什么要使用分布式锁&#xff0c;或者分布式锁的使用场景&#xff1f; 定时任务。在分布式场景下&#xff0c;只控制一台服务器执行定时任务&#xff0c;这就需要分布式锁 要控制定时任务在同一时间…...

Linux访问firefox 显示Error: no DISPLAY environment variable specified

在 CentOS 7 中访问 Firefox 浏览器时&#xff0c;出现 "Error: no DISPLAY environment variable specified" 的错误提示通常是由于缺少显示环境变量导致的。 要解决这个问题&#xff0c;你可以按照以下步骤进行配置&#xff1a; 1. 确保已经安装 X Window Syst…...

线性回归简介

线性回归简介 1、情景描述2、线性回归 1、情景描述 假设&#xff0c;我们现在有这么一张图&#xff1a; 其中&#xff0c;横坐标x表示房子的面积&#xff0c;纵坐标y表示房价。我们猜想x与y之间存在线性关系&#xff1a; y k x b ykxb ykxb 现在&#xff0c;思考一个问题&…...

从游戏机到影音中心:用wiliwili解锁Switch的隐藏娱乐潜能

从游戏机到影音中心&#xff1a;用wiliwili解锁Switch的隐藏娱乐潜能 【免费下载链接】wiliwili 专为手柄控制设计的第三方跨平台B站客户端&#xff0c;目前可以运行在PC全平台、PSVita、PS4 和 Nintendo Switch上 项目地址: https://gitcode.com/GitHub_Trending/wi/wiliwil…...

Qwen3-VL-8B系统资源管理:监控与清理GPU显存和C盘空间

Qwen3-VL-8B系统资源管理&#xff1a;监控与清理GPU显存和C盘空间 长期运行像Qwen3-VL-8B这样的大模型服务&#xff0c;就像养了一头“数字大象”——它能力强大&#xff0c;但胃口也不小&#xff0c;尤其能吃GPU显存和硬盘空间。很多朋友刚开始部署时一切顺利&#xff0c;但跑…...

Git子模块更新报错?手把手教你解决‘Unable to find origin/master revision‘问题

Git子模块更新报错深度解析&#xff1a;从原理到实战解决方案 1. 问题现象与核心原因分析 当你执行git submodule update --remote命令时&#xff0c;突然遇到fatal: Unable to find current origin/master revision in submodule path错误提示&#xff0c;这种场景在团队协作…...

pandas API on Spark 与 pandas / PySpark 互转指南

1. 为什么会有互转需求 pandas API on Spark 的定位很特殊&#xff1a;它既想保留 pandas 的使用体验&#xff0c;又建立在 Spark 的分布式执行之上。因此开发时常见的场景有三种&#xff1a; 已经有 pandas 代码&#xff0c;想迁移到分布式环境已经在用 PySpark DataFrame&…...

古基因组学:降解DNA的损伤模式、污染评估与群体历史推断

点击 “AladdinEdu&#xff0c;你的AI学习实践工作坊”&#xff0c;注册即送-H卡级别算力&#xff0c;沉浸式云原生集成开发环境&#xff0c;80G大显存多卡并行&#xff0c;按量弹性计费&#xff0c;教育用户更享超低价。 摘要&#xff1a;古基因组学通过对古代生物遗骸中高度降…...

Qwen2-VL-2B-Instruct一键部署教程:基于Ubuntu 20.04的GPU环境快速搭建

Qwen2-VL-2B-Instruct一键部署教程&#xff1a;基于Ubuntu 20.04的GPU环境快速搭建 你是不是也遇到过这种情况&#xff1f;看到一个很酷的多模态大模型&#xff0c;想立刻上手试试&#xff0c;结果被复杂的依赖安装、环境配置、驱动适配搞得头大&#xff0c;折腾半天还没跑起来…...

Pixel Aurora Engine实战落地:为像素RPG自动生成NPC对话头像与场景贴图

Pixel Aurora Engine实战落地&#xff1a;为像素RPG自动生成NPC对话头像与场景贴图 1. 像素游戏开发者的新利器 想象一下这样的场景&#xff1a;你正在开发一款像素风格的RPG游戏&#xff0c;需要为上百个NPC设计独特的对话头像&#xff0c;还要制作大量场景贴图。传统方法下…...

ncmdumpGUI:网易云音乐加密文件转换的完整解决方案

ncmdumpGUI&#xff1a;网易云音乐加密文件转换的完整解决方案 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 一、初识ncmdumpGUI&#xff1a;解密音乐文件的…...

OFA视觉蕴含模型效果展示:抽象艺术作品与评论文本关联性

OFA视觉蕴含模型效果展示&#xff1a;抽象艺术作品与评论文本关联性 1. 引言&#xff1a;当抽象艺术遇见智能理解 想象一下这样的场景&#xff1a;你站在一幅抽象画前&#xff0c;画布上是狂放的笔触和难以名状的色彩组合。旁边有人评论说&#xff1a;"这幅画表达了宇宙…...

IEEE会议论文避雷指南:如何用GSview+Photoshop搞定EPS图片压缩与特殊字符命名

IEEE会议论文图片处理全攻略&#xff1a;从格式转换到命名规范 第一次投稿IEEE会议的新手研究者们&#xff0c;往往会在图片处理环节栽跟头——明明内容扎实、实验充分&#xff0c;却因为技术细节问题被编辑退回修改。这不是学术能力的问题&#xff0c;而是对印刷出版标准的不熟…...