【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践
React 基础巩固(三十二)——Redux的三大原则
一、Redux的三大原则
-
单一数据源
- 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中;
- Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护;
- 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;
-
State是只读的
-
唯一修改State的方法一定是触发action,不要试图在其他地方通过任何的方式来修改State;
-
这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state;
-
这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心reace condition(竞态)的问题;
-
-
使用纯函数来执行修改
- 通过reducer将旧state和actions联系在一起,并且返回一个新的state;
- 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree 的一部分;
- 但是所有的reducer都应该是纯函数,不能产生任何的副作用;
二、Redux的使用流程

三、Redux的基本使用(计数器小案例)
-
构建react项目
# 创建新的react项目 create-react-app redux-learn # 创建成功后cd进入文件夹,随后安装redux npm install redux -
删除暂时无关文件,构建store相关文件,并引用store至所需页面中
- 目录

-
store/constants.js
export const ADD_NUMBER = "add_number"; export const SUB_NUMBER = "sub_number"; -
store/reducer.js
import * as actionTypes from "./constants";const initialState = {counter: 111, };function reducer(state = initialState, action) {switch (action.type) {case actionTypes.ADD_NUMBER:return { ...state, counter: state.counter + action.num };case actionTypes.SUB_NUMBER:return { ...state, counter: state.counter - action.num };default:return state;} }export default reducer; -
store/actionCreators.js
import * as actionTypes from "./constants";export const addNumberAction = (num) => ({type: actionTypes.ADD_NUMBER,num, });export const subNumberAction = (num) => ({type: actionTypes.SUB_NUMBER,num, }); -
store/index.js
import { createStore } from "redux"; import reducer from "./reducer";const store = createStore(reducer);export default store; -
pages/home.jsx
import React, { PureComponent } from "react"; import store from "../store"; import { addNumberAction } from "../store/actionCreators"; export class home extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}addNumber(num) {store.dispatch(addNumberAction(num));}render() {const { counter } = this.state;return (<div>home counter:{counter}<div><button onClick={(e) => this.addNumber(1)}>+1</button><button onClick={(e) => this.addNumber(5)}>+5</button><button onClick={(e) => this.addNumber(8)}>+8</button></div></div>);} }export default home; -
pages/profile.jsx
import React, { PureComponent } from "react"; import store from "../store"; import { subNumberAction } from "../store/actionCreators"; export class profile extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}subNumber(num) {store.dispatch(subNumberAction(num));}render() {const { counter } = this.state;return (<div>profile counter:{counter}<div><button onClick={(e) => this.subNumber(1)}>-1</button><button onClick={(e) => this.subNumber(5)}>-5</button><button onClick={(e) => this.subNumber(8)}>-8</button></div></div>);} }export default profile; -
App.jsx
import React, { PureComponent } from "react"; import Home from "./pages/home"; import Profile from "./pages/profile"; import "./style.css"; import store from "./store";export class App extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}render() {const { counter } = this.state;return (<div><h2>App Counter: {counter}</h2><div className="pages"><Home /><Profile /></div></div>);} }export default App;
- 运行结果

至此,代码仍较为复杂,代码将在React 基础巩固(三十三)中得到优化
相关文章:
【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践
React 基础巩固(三十二)——Redux的三大原则 一、Redux的三大原则 单一数据源 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中;Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护…...
[NLP]使用Alpaca-Lora基于llama模型进行微调教程
Stanford Alpaca 是在 LLaMA 整个模型上微调,即对预训练模型中的所有参数都进行微调(full fine-tuning)。但该方法对于硬件成本要求仍然偏高且训练低效。 [NLP]理解大型语言模型高效微调(PEFT) 因此, Alpaca-Lora 则是利用 Lora…...
Linux Shell 脚本编程学习之【第5章 文件的排序、合并与分割 (第四部分之cut命令) 】
第5章 文件的排序、合并与分割 (第四部分之cut命令) 4 cut 命令4.1 选项及其意义4.2 输出字符 (-c)4.3 改变分隔符(-d)和提取特定域(-f) 5 paste 命令5.1 paste 命令选项及其意义5.2…...
php-golang-rpc jsonrpc和php客户端tivoka/tivoka包实践
golang 代码: package main import ( "fmt" "net" "net/rpc" "net/rpc/jsonrpc" ) type App struct{} type Res struct { Code int json:"code" Msg string json:"msg" Data any json:"…...
flutter 打包iOS安装包
flutter iOS Xcode打包并导出ipa文件安装包 1、 Xcode配置 1、 启动打包 1、 等待打包 1、 打包完成、准备导出ipa 1、 选择模式 1、 选择配置文件 1、 导出 1、 选择导出位置 1、 得到ipa...
二进制重排
二进制重排作用 二进制重排的主要目的是将连续调用的函数连接到相邻的虚拟内存地址,这样在启动时可以减少缺页中断的发生,提升启动速度。目前网络上关于ios应用启动优化,通过XCode实现的版本比较多。MacOS上的应用也是通过clang进行编译的&am…...
【Linux后端服务器开发】MAC地址与其他重要协议
目录 一、以太网 二、MAC地址 三、MTU 四、ARP协议 五、DNS系统 六、ICMP协议 七、NAT技术 八、代理服务器 一、以太网 “以太网”不是一种具体的网路,而是一种技术标准:既包含了数据链路层的内容,也包含了一些物理层的内容…...
WebGPU入门
1. 引言 前序博客: CUDA入门WebGPUZKP:客户端证明 WebGPU——Draft 2023.7.17 由苹果、谷歌、Mozilla团队发起,当前处于草稿阶段,旨在成为W3C推荐标准。 WebGPU为 在图形处理单元(GPU)上执行诸如渲染和…...
React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式
上文 React Dva项目中模仿网络请求数据方法 中,我们书写了Dva项目模拟后端数据的方式 但是 我们.roadhogrc.mock.js中的这个处理其实并不好用 我们还需要一个一个的引入 我们可以直接靠一段代码 import fs from fs; import path from path; const mock {} fs.re…...
跨境独立站如何应对恶意网络爬虫?
目录 跨境出海独立站纷纷成立 爬虫威胁跨境电商生存 如何有效识别爬虫? 技术反爬方案 防爬虫才能保发展 中国出海跨境电商业务,主要选择大平台开设店铺,例如,亚马逊、eBay、Walmart、AliExpress、Zalando等。随着业务的扩大&…...
C# SourceGenerator 源生成器初探
简介 注意: 坑极多。而且截至2023年,这个东西仅仅是半成品 利用SourceGenerator可以在编译结束前生成一些代码参与编译,比如编译时反射之类的,还有模板代码生成都很好用。 演示仓库传送门-Github-yueh0607 使用 1. 创建项目 …...
网络安全/信息安全—学习笔记
一、网络安全是什么 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面…...
【Visual Studio】无法打开包括文件: “dirent.h”: No such file or directory
VS2017/2019 无法打开包括文件: “dirent.h”: No such file or directory 1 “dirent.h”: No such file or directory 在windows下的VS2017/2019编译器中,发现无法打开“dirent.h”,主要是MSVC并没有实现这个头文件,但是在Linux这个头文件…...
asp.net MVC markdown编辑器
在 ASP.NET MVC 中,你可以使用一些第三方 Markdown 编辑器来让用户在网页上方便地编辑和预览 Markdown 内容。这些编辑器通常提供实时预览功能,将 Markdown 文本转换为实时渲染的 HTML,并支持编辑器工具栏来辅助用户编辑。 以下是一些流行的…...
论文浅尝 | 预训练Transformer用于跨领域知识图谱补全
笔记整理:汪俊杰,浙江大学硕士,研究方向为知识图谱 链接:https://arxiv.org/pdf/2303.15682.pdf 动机 传统的直推式(tranductive)或者归纳式(inductive)的知识图谱补全(KGC)模型都关注于域内(in-domain)数据,而比较少关…...
算法工程师-机器学习面试题总结(2)
线性回归 线性回归的基本思想是? 线性回归是一种用于建立和预测变量之间线性关系的统计模型。其基本思想是假设自变量(输入)和因变量(输出)之间存在线性关系,通过建立一个线性方程来拟合观测数据ÿ…...
低成本32位单片机空调内风机方案
空调内风机方案主控芯片采用低成本32位单片机MM32SPIN0230,内部集成了具有灵动特色的电机控制功能:高阶4路互补PWM、注入功能的高精度ADC、轨到轨运放、轮询比较器、32位针对霍尔传感器的捕获时钟、以及硬件除法器和DMA等电机算法加速引擎。 该方案具有…...
读发布!设计与部署稳定的分布式系统(第2版)笔记25_互联层之路由和服务
1. 控制请求数量 1.1. 这个世界可以随时摧毁我们的系统 1.1.1. 要么拒绝工作 1.1.2. 要么扩展容量 1.1.3. 没有人会在与世隔绝的环境中使用服务,现在的服务大多必须处理互联网规模的负载 1.2. 系统的每次失效,都源自某个等待队列 1.3. 每个请求都会…...
AI面试官:LINQ和Lambda表达式(二)
AI面试官:LINQ和Lambda表达式(二) 当面试官面对C#中关于LINQ和Lambda表达式的面试题时,通常会涉及这两个主题的基本概念、用法、实际应用以及与其他相关技术的对比等。以下是一些可能的面试题目,附带简要解答和相关案…...
Mysql原理篇--第二章 索引
文章目录 前言一、mysql的索引是什么?1.1 索引的结构:1.2 b树特性:1.3 b树每个节点的结构:1.4 b树 键值的大小排序:1.4 b树 存储(InnoDB): 二、索引类型2.1 主要的索引类型ÿ…...
Mermaid图表绘制终极指南:用Markdown代码快速创建专业图表
Mermaid图表绘制终极指南:用Markdown代码快速创建专业图表 【免费下载链接】mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器,支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和…...
【仅限核心开发者知晓】Polars 2.0清洗Pipeline的4层IR抽象:为何比Pandas快11.8倍?源码注释级解读
第一章:Polars 2.0清洗Pipeline的演进本质与性能跃迁全景Polars 2.0 将清洗 Pipeline 从“惰性执行显式优化提示”升级为“全图级自动重写零拷贝流式调度”,其本质是将数据清洗从过程式编排转向声明式语义图推理。核心突破在于 LazyFrame 的物理计划生成…...
【Cadence Virtuoso】进阶:利用仿真数据反推工艺库MOSFET的λ与Vth实战
1. 为什么需要反推MOSFET参数? 刚接触TSMC 65nm工艺时,我发现PDK提供的参数表里λ和Vth都是固定值。但在实际设计电流镜和差分对时,这些"标准参数"总让我觉得哪里不对劲。后来在调试一个基准电流源时终于发现问题:PDK给…...
OpenClaw多语言支持:百川2-13B量化模型国际化任务实践
OpenClaw多语言支持:百川2-13B量化模型国际化任务实践 1. 为什么需要多语言自动化助手 去年接手一个跨国协作项目时,我每天要处理来自五个国家的邮件、文档和会议记录。最头疼的不是时差问题,而是不同语言的文档混在一起——英文技术规范、…...
计算机毕业设计springboot鲜花在线商城 基于SpringBoot的园艺花卉网络销售系统 基于Java Web的线上花店订购管理平台
计算机毕业设计springboot鲜花在线商城911yt9 (配套有源码 程序 mysql数据库 论文)本套源码可以先看具体功能演示视频领取,文末有联xi 可分享近年来,互联网技术的迅猛发展和智能终端设备的全面普及,为传统零售行业带来…...
追赶30名
1.单词2.翻译生成式人工智能是指能够生成与训练数据相似的新数据的模型。常见的生成模型包括生成对抗网络(GAN)和扩散模型。这些模型已成功应用于图像生成、文本创作和音频合成等领域。在GAN框架中,生成器与判别器相互对抗,从而不…...
终极罗技鼠标压枪宏指南:3分钟快速上手,告别武器后坐力困扰!
终极罗技鼠标压枪宏指南:3分钟快速上手,告别武器后坐力困扰! 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg …...
Uvicorn终极指南:如何快速构建高性能Python异步Web服务器
Uvicorn终极指南:如何快速构建高性能Python异步Web服务器 【免费下载链接】uvicorn An ASGI web server, for Python. 🦄 项目地址: https://gitcode.com/GitHub_Trending/uv/uvicorn Uvicorn是一款专为Python设计的轻量级ASGI Web服务器…...
文脉定序系统一键部署教程:基于Ubuntu 20.04的快速环境搭建
文脉定序系统一键部署教程:基于Ubuntu 20.04的快速环境搭建 你是不是也对那些能理解上下文、进行长文本对话的AI模型感到好奇?想自己动手部署一个来玩玩,但一看到复杂的安装步骤和满屏的命令行就头疼?别担心,今天我就…...
论文AI率从80%降到10%以下的完整攻略:实测3款降AI率工具真实效果
论文AI率从80%降到10%以下的完整攻略:实测3款降AI率工具真实效果 上个月我同学发来一张知网检测报告,AI率87%,整个人都懵了。她用DeepSeek写了大部分初稿,没想到检测会这么高。当时距离论文提交截止不到两周,她问我有没…...
