【前端知识】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 主要的索引类型ÿ…...
零基础快速入门前端CSS Transform 与动画核心知识点及蓝桥杯 Web 应用开发考点解析(可用于备赛蓝桥杯Web应用开发)
CSS 中的 transform(变换)和 animation(动画)是实现网页动态效果的核心工具,也是蓝桥杯 Web 应用开发赛道的高频考点一、CSS 2D 变换(transform)transform 用于对元素进行平移、旋转、缩放、倾斜…...
技术赋能B端拓客:号码核验行业的破局与价值重塑,氪迹科技法人股东号码筛选系统,阶梯式价格
2026年,B端拓客正式迈入智能内卷时代,“精准获客、降本增效”成为企业突破业绩瓶颈的核心关键词,而号码核验作为拓客流程的前置过滤环节,直接决定了线索质量与人力效能,成为影响拓客投入回报比的关键变量。当前&#x…...
聊聊永磁同步电机里的那点“扰动“破事
两种负载扰动观测器设计思路,pmsm仿真 仿真基于离散模型,观测器设计基于m文件,方便移植到c验证 包含:(1)1.5延时补偿(2)扩张龙伯格扰动观测器(ESO)设计&#…...
如何免费完成专业定性数据分析:QualCoder终极指南
如何免费完成专业定性数据分析:QualCoder终极指南 【免费下载链接】QualCoder Qualitative data analysis for text, images, audio, video. Cross platform. Python 3.8 or newer and PyQt6. 项目地址: https://gitcode.com/gh_mirrors/qu/QualCoder 你是否…...
智能号码定位引擎:企业级地理信息快速响应解决方案
智能号码定位引擎:企业级地理信息快速响应解决方案 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mirrors…...
手把手教你用脉动阵列实现FIR滤波器:从理论到VLSI设计的完整流程
手把手教你用脉动阵列实现FIR滤波器:从理论到VLSI设计的完整流程 在数字信号处理领域,FIR滤波器因其线性相位特性和稳定性而广受欢迎。但当面对高性能、低功耗的应用场景时,传统实现方式往往难以满足需求。脉动阵列(Systolic Arr…...
Multisim 13.0 仿真 LC 振荡器:从起振到稳定,手把手教你分析波形与频率稳定度
Multisim 13.0 仿真 LC 振荡器:从起振到稳定,手把手教你分析波形与频率稳定度 在电子工程领域,LC振荡器作为基础电路之一,其设计与分析能力是每位硬件工程师的必修课。Multisim作为业界广泛使用的电路仿真软件,为我们…...
nlp_structbert模型助力AIGC内容审核:生成文本与违规库相似度比对
nlp_structbert模型助力AIGC内容审核:生成文本与违规库相似度比对 1. 引言:当AIGC内容爆发,审核成了大难题 最近两年,AIGC技术发展得太快了。无论是写文章、做设计,还是生成营销文案,AI工具已经渗透到内容…...
C# + Halcon实战:药盒上多个条形码一次扫全的配置与代码详解(.NET Framework 4.8)
C# Halcon实战:药盒多条形码高精度识别系统开发指南 在药品包装生产线上,一个药盒往往同时印有追溯码、物流码和防伪码等多种条形码。传统扫码设备通常需要多次定位才能完成读取,而基于Halcon的机器视觉方案能实现毫秒级的多码同步识别。本文…...
掌握通达信数据接口:量化分析从入门到精通
掌握通达信数据接口:量化分析从入门到精通 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 解决量化数据获取难题:MOOTDX的技术方案与实战应用 如何突破量化分析的数据获取…...
