当前位置: 首页 > 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;思考一个问题&…...

3个关键步骤:在电视盒子上完美运行Armbian系统的终极指南

3个关键步骤&#xff1a;在电视盒子上完美运行Armbian系统的终极指南 【免费下载链接】amlogic-s9xxx-armbian Supports running Armbian on Amlogic, Allwinner, and Rockchip devices. Support a311d, s922x, s905x3, s905x2, s912, s905d, s905x, s905w, s905, s905l, rk358…...

网站SEO优化与网站内容更新的关系_企业网站SEO优化与行业特点的关系

<h3 id"seo_seo">网站SEO优化与网站内容更新的关系_企业网站SEO优化与行业特点的关系</h3> <p>在当今数字化时代&#xff0c;网站的SEO优化与内容更新之间有着密切的关系。这不仅关系到企业网站的流量&#xff0c;还直接影响企业的品牌形象和市场竞…...

别再为UI动画发愁了!用Spine+Unity 2021制作丝滑2D动画的保姆级流程

SpineUnity 2021&#xff1a;打造专业级2D UI动画的完整实战指南 在独立游戏开发领域&#xff0c;UI动画的质量往往决定着玩家的第一印象。那些流畅的按钮反馈、生动的界面过渡&#xff0c;不仅提升了产品质感&#xff0c;更直接影响着用户的留存率。然而对于资源有限的中小团队…...

手把手教你学Simulink——基于Simulink的无差拍控制三相整流器高精度电流跟踪

目录 手把手教你学Simulink ——基于Simulink的无差拍控制三相整流器高精度电流跟踪 一、问题背景 二、系统建模与控制原理 1. 三相整流器拓扑 2. dq 轴数学模型(同步旋转坐标系) 3. 无差拍控制律推导 三、整体控制架构 四、Simulink 建模步骤 第一步:搭建三相整流…...

从“Hello World”到区域赛银牌:我的ACM算法打怪升级全记录(附各阶段工具包)

从“Hello World”到区域赛银牌&#xff1a;我的ACM算法打怪升级全记录 记得大一刚接触编程时&#xff0c;连最简单的冒泡排序都要调试半天。三年后站在领奖台上&#xff0c;回想这段旅程&#xff0c;最珍贵的不是奖牌&#xff0c;而是那些深夜debug的坚持和突破自我的瞬间。这…...

Android 离线语音合成技术选型指南:从MaryTTS到TensorFlowTTS

1. 为什么需要离线语音合成技术&#xff1f; 最近几年&#xff0c;越来越多的应用开始集成语音合成功能。你可能见过导航软件里实时播报路况的电子女声&#xff0c;或者听书App里流畅朗读小说的AI配音。这些场景背后&#xff0c;都离不开TTS&#xff08;Text-To-Speech&#x…...

专业安防怎么选?奥尔特云与普通摄像头核心性能对比

不少人认为安防摄像头只是“能录像、能看见”就够&#xff0c;选型无需太过考究&#xff0c;实则这是安防系统搭建的关键误区。安防系统的核心是精准感知、有效采集&#xff0c;而摄像头作为前端核心采集设备&#xff0c;是所有安防数据的源头。若源头的画面质量、感知能力不达…...

Simulink Test Sequence模块在复杂逻辑测试中的高效应用

1. Test Sequence模块入门&#xff1a;逻辑测试的瑞士军刀 第一次接触Simulink Test Sequence模块时&#xff0c;我正被一个汽车电子控制单元(ECU)的状态机测试折磨得焦头烂额。传统脚本测试需要编写大量重复代码&#xff0c;而Test Sequence就像突然出现的瑞士军刀&#xff0c…...

手把手教你用Ollama命令搭建个人AI助手:从拉取Llama 3到定制化部署

从零构建智能对话引擎&#xff1a;Ollama与Llama 3的深度实践指南 在人工智能技术日益普及的今天&#xff0c;拥有一个个性化的AI助手已成为许多开发者和技术爱好者的追求。不同于云端服务的黑箱操作&#xff0c;本地部署的AI模型能提供更高的隐私保护和定制自由度。本文将带你…...

73:L的程序安全:蓝队的规范防御

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-26 主要来源平台&#xff1a; GitHub 摘要&#xff1a; 程序安全是防御的基石&#xff0c;通过规范的流程、自动化执行和可追溯设计构建可靠的安全防御体系。本文分享程序安全的核心价值、L的程序安全策略、技术实现…...