React-Redux

什么是Redux?

Redux是React最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行

作用:通过集中管理的方式管理应用的状态

例子:不和任何框架绑定,不使用任何构建工具,使用纯Redux实现计数器

使用步骤:

1.定义一个reducer函数(根据当前想要做的修改返回一个新的状态)

2.使用createStore方法传入reducer函数生成一个store实例对象

3.使用store实例的subscribe方法订阅数据的变化(数据一旦变化,可以得到通知)

4.使用store实例的dispatch方法提交action对象触发数据变化(告诉reducer你想怎么改数据)

5.使用store实例的getState方法获取最新的状态数据更新到视图中

<!doctype html>
<html><head><meta charset="utf-8"><title>redux</title>
</head><body><button id="decrement">-</button><span id="count">0</span><button id="increment">+</button><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.1.1/redux.min.js"></script><script>//1.定义reducer函数//作用:根据不同的action对象,返回不同的新的state//state:管理的数据初始状态//action:对象type标记当前想要做什么样的修改function reducer(state={count:0},action){//数据不可变:基于原始状态生成一个新的状态if(action.type==='INCREMENT'){return{count:state.count+1}}if(action.type==='DECREMENT'){return {count:state.count-1}}return state}//2.使用reducer函数生成store实例const store=Redux.createStore(reducer)//3.通过store实例的subscribe订阅数据变化store.subscribe(()=>{console.log('state变化了',store.getState())document.getElementById('count').innerText=store.getState().count})//4.通过store实例的dispatch函数提交action更改状态const inBtn=document.getElementById('increment')inBtn.addEventListener('click',()=>{//增store.dispatch({type:'INCREMENT'})})const dBtn=document.getElementById('decrement')dBtn.addEventListener('click',()=>{//减store.dispatch({type:'DECREMENT'})})//5.通过store实例的getState方法获取最新状态更新到视图中</script>
</body></html>

Redux管理数据流程梳理

为了职责清晰,数据流向明确,Redux把整个数据修改的流程分成了三个核心概念,分别是:state、action和reducer

1.state-一个对象存放着我们管理的数据状态

2.action-一个对象用来描述你想怎么改数据

3.reducer-一个函数更具action的描述生成一个新的state

环境准备

配套工具

在React中使用redux,官方要求安装俩个其他插件-Redux Toolkit和react-redux

1.Redux Toolkit(RTK):官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式

2.react-redux: 用来链接Redux和React组件的中间件

配置基础环境

1.使用CRA快速创建React项目

npx create-react-app 项目名称

2.安装配套工具

进入新创建的项目里

cd 项目名

然后安装

npm i @reduxjs/toolkit 项目名

3.启动项目

npm run start

store目录结构设计

1.通常集中状态管理的部分都会单独创建一个单独的’store‘目录

2.应用通常会有很多个子store模块,所以创建一个’modules‘目录,在内部编写业务分类的子store

3.store中的入口文件index.js的作用是组合modules中所有的子模块,并导出store

实现counter

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/29926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像处理与视觉感知复习--形态学图像处理

文章目录 计算图像膨胀和腐蚀计算开操作和闭操作击中或击不中变化 计算图像膨胀和腐蚀 定义&#xff1a; A c A^c Ac 表示集合A的补集几何的反射 有集合A中所有元素相对于原点的反射元素组成的集合称为集合A的反射&#xff0c;几位 A ^ \hat{A} A^ A ^ { w ∣ w − a , a …

SpringTask-Timer实现定时任务

1、Timer 实现定时任务 1.1、JDK1.3 开始推出定时任务实现工具。 1.2、API 执行代码 public static void main(String[] args) throws ParseException {Timer timer new Timer();String str"2024-06-10 23:24:00";Date date new SimpleDateFormat("yyyy-MM…

Pikachu靶场--文件包含

参考借鉴 Pikachu靶场之文件包含漏洞详解_pikachu文件包含-CSDN博客 文件包含&#xff08;CTF教程&#xff0c;Web安全渗透入门&#xff09;__bilibili File Inclusion(local) 查找废弃隐藏文件 随机选一个然后提交查询 URL中出现filenamefile2.php filename是file2.php&…

爱死了,4款逆天IOS App推荐!

河马喝水提醒 「河马喝水提醒」是一款生活小助手应用&#xff0c;旨在帮助用户建立并维持定时喝水的良好习惯。该应用不仅是一个提醒闹钟&#xff0c;更是健康生活的贴心伙伴。它每天定时推送提醒&#xff0c;帮助用户在繁忙的日常中不忘补充水分。此外&#xff0c;该应用还提供…

移植案例与原理 - build lite配置目录全梳理

命令行工具hb(HarmonyOS|OpenHarmony Build 编译构建系统的缩写)都很熟悉了。这是一个基于gn和ninja的构建系统&#xff0c;以支持OpenHarmony组件化开发为目标&#xff0c;提供以下基本功能&#xff1a; 支持按组件拼装产品并编译。 独立构建芯片解决方案厂商源码。 独立构建…

什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?

FOUC&#xff08;Flash of Unstyled Content&#xff0c;无样式内容闪烁&#xff09;是指在网页加载过程中&#xff0c;用户可能会短暂地看到未应用样式的原始 HTML 内容&#xff0c;随后样式表加载完成后&#xff0c;页面才会以正确的样式重新渲染。这种现象会影响用户体验&am…

wpf textbox 有焦点 导致后台更新 前台不跟着改变

这个问题可能是由于 WPF 的数据绑定机制导致的。当 TextBox 有焦点时,它会独立于数据绑定进行更新,这可能会导致前台界面不能及时反映后台数据的变化。 1.使用 UpdateSourceTrigger 属性: 在数据绑定时,将 UpdateSourceTrigger 属性设置为 PropertyChanged。这样当 TextBox 的…

vue中的自定义指令

第1部分&#xff1a;引言 在Vue.js中&#xff0c;自定义指令提供了一种非常灵活的方式来扩展Vue的功能。它们允许开发者直接对DOM进行操作&#xff0c;响应数据变化&#xff0c;甚至与其他组件或库集成。 第2部分&#xff1a;Vue自定义指令概述 2.1 什么是Vue自定义指令 Vu…

ROM和RAM的区别

ROM&#xff08;Read-Only Memory&#xff0c;只读存储器&#xff09;和RAM&#xff08;Random-Access Memory&#xff0c;随机存取存储器&#xff09;是计算机系统中两种不同类型的内存&#xff0c;它们在功能、存储内容和使用方式上有着明显的区别&#xff0c;但同时也存在一…

新人学习笔记之(数据类型(小数))

一、小数的数据类型分为&#xff1a;float、double #include<stdio.h>int main() {// 1. 定义float、double、long double数据类型的变量// float 单精度小数&#xff08;精确度小数后6位&#xff09;windows占4个字节&#xff08;38位&#xff09;float a 3.14F; // f…

Linux操作系统学习:day03

内容来自&#xff1a;Linux介绍 视频推荐&#xff1a;[Linux基础入门教程-linux命令-vim-gcc/g -动态库/静态库 -makefile-gdb调试]( 目录 day0317、创建删除目录创建目录删除目录 18、文件的拷贝19、mv 命令20、查看文件内容的相关命令21、给文件创建软连接或硬链接 day03 …

环境搭建---单机k8s

配置基础环境 关闭防火墙 [rootVM-20-14-centos ~]# systemctl stop firewalld && systemctl disable firewalld关闭selinux [rootVM-20-14-centos ~]# setenforce 0 && sed -i "s/SELINUXenforcing/SELINUXdisabled/g" /etc/selinux/config禁止s…

[Qt的学习日常]--常用控件3

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、显示类控…

Spark入门(一篇就够了)

文章目录 引言1. Spark 基础1.1 Spark 为何物1.2 Spark VS Hadoop1.3 Spark 优势及特点1.3.1 优秀的数据模型和丰富计算抽象1.3.2 完善的生态圈-fullstack1.3.3 spark的特点 1.4 Spark 运行模式 2. Spark Core2.1 RDD详解2.1.1 RDD概念2.1.2 RDD属性2.1.3 RDD API2.1.3.1 RDD 的…

轻松掌握文本处理技巧:自定义提取指定行范围,高效批量处理文本数据,轻松提升工作效率!

在信息爆炸的时代&#xff0c;文本数据已经成为我们生活和工作中不可或缺的一部分。然而&#xff0c;面对海量的文本数据&#xff0c;如何高效、准确地提取所需信息&#xff0c;成为了许多人面临的挑战。今天&#xff0c;我们向您推荐一种全新的文本处理技巧&#xff0c;让您轻…

科普童话投稿

《科普童话》杂志是由国家新闻出版总署批准、黑龙江省教育厅主管、黑龙江省语言文字报刊社主办的正规期刊。《科普童话》以培养科学素养与创新探索精神为办刊宗旨&#xff0c;以科学与艺术统一为编辑方针&#xff0c;以科学教育、教育科学作为自己的出发点&#xff0c;致力于对…

基于Java + Swing + MySQL的学生选课及成绩管理系统(Java课程设计)

目录 开发工具系统结构功能展示登录与注册界面&#xff08;通用&#xff09;主界面&#xff08;通用&#xff09;学生信息查询界面&#xff08;学生用户&#xff09;学生信息管理界面&#xff08;教师用户 管理员用户&#xff09;学生选课界面&#xff08;学生用户&#xff09;…

OpenAI新开放了这些好用的API功能(附AI学习指南)

OpenAI近期召开了开发者大会&#xff0c;同时也发布和开放了一些新的功能特性&#xff0c;比如新版本GPT-4 Turbo&#xff0c;支持128k上下文&#xff0c;知识截止更新到2023年4月&#xff0c;视觉能力、DALLE3&#xff0c;文字转语音TTS等等全都对API开放&#xff0c;GPTs商店…

反馈型振荡器

目录 反馈型振荡器分类 基本工作原理 启动过程 “心脏”LC振荡 起振条件 平衡条件 稳定条件 互感耦合振荡器 电感三端LC振荡器 电容三端LC振荡器 串联改进电容三端式振荡器 并联改进电容三端式振荡器 相位平衡条件的判断准则 反馈型振荡器分类 基本工作原理 启动过…

华为---RIP路由协议的汇总

8.3 RIP路由协议的汇总 8.3.1 原理概述 当网络中路由器的路由条目非常多时&#xff0c;可以通过路由汇总(又称路由汇聚或路由聚合)来减少路由条目数&#xff0c;加快路由收敛时间和增强网络稳定性。路由汇总的原理是&#xff0c;同一个自然网段内的不同子网的路由在向外(其他…