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

react学习-redux快速体验

news 2026/5/13 13:49:12

1.redux是用于和react搭配使用的状态管理工具，类似于vue的vuex。redux可以不和任何框架绑定，独立使用
2.使用步骤
（1）定义一个reducer函数（根据当前想要做的修改返回一个新的状态）
（2）使用createStore方法传入erducer函数生成一个store实例对象
（3）使用store实例的subscribe方法订阅数据变化（数据一旦变化可以得到通知）
（4）使用store实例的dispatch方法提交action对象 触发数据变化（告诉reducer你想要怎么改数据）
（5）使用store实例的getState方法获取最新的状态数据更新到视图中
3.代码案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="decrement">-</button><span id="count">0</span><button id="increment">+</button><script src="https://cdn.bootcss.com/redux/4.0.0/redux.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订阅数据变化//   回调函数可以在每次state发生变化时自动执行store.subscribe(() => {console.log("state变化了");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",});});</script></body>
</html>

相关文章：

react学习-redux快速体验

1.redux是用于和react搭配使用的状态管理工具&#xff0c;类似于vue的vuex。redux可以不和任何框架绑定&#xff0c;独立使用 2.使用步骤 &#xff08;1&#xff09;定义一个reducer函数&#xff08;根据当前想要做的修改返回一个新的状态&#xff09; &#xff08;2&#xff0…...

编程日记 2024/6/15 20:03:27

基于flask的网站如何使用https加密通信-问题记录

文章目录 项目场景&#xff1a;问题1问题描述原因分析解决步骤解决方案 问题2问题描述原因分析解决方案 参考文章 项目场景&#xff1a; 项目场景&#xff1a;基于flask的网站使用https加密通信一文中遇到的问题记录 问题1 问题描述 使用下面的命令生成自签名的SSL/TLS证书和…...

编程日记 2024/6/15 20:02:26

记C#优化接口速度过程

前提摘要 首先这个项目是接手的前一任先写的项目&#xff0c;接手后&#xff0c;要求对项目一些速度相对较慢的接口进行优化&#xff0c;到第一个速度比较慢的接口后&#xff0c;发现单接口耗时4-8秒&#xff0c;是的&#xff0c;请求同一个接口&#xff0c;在参数不变的情况下…...

编程日记 2024/6/15 19:59:23

windows环境如何运行python/java后台服务器进程而不显示控制台窗口

1.通常我们在windows环境下使用Java或Python语言编写服务器程序&#xff0c;都希望他在后台运行&#xff0c;不要显示黑乎乎的控制台窗口&#xff1a; 2.有人写了一个bat文件: cd /d D:\lottery\server && python .\main.py 放到了开机自启动里&#xff0c;可是开机的…...

编程日记 2024/6/15 19:58:22

记周末百度云防御CC攻击事件

今天一早&#xff0c;收到百度智能云短信提醒&#xff0c;一位客户的网站遭遇了CC攻击。 主机吧赶紧登陆客户网站查看&#xff0c;是否正常&#xff0c;看是否需要通知客户。 结果打开正常&#xff0c;看情况并没什么影响&#xff0c;那就等攻击结果了再看吧。 下午的时候&am…...

编程日记 2024/6/15 19:57:20

vue中v-bind控制class和style

当使用v-bind指令控制class和style时&#xff0c;可以通过动态绑定的方式根据不同的条件来添加或移除class&#xff0c;以及改变元素的样式。 1. 控制class 通过v-bind:class可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。 对象语法&#xff1a;使用…...

编程日记 2024/6/15 19:56:19

【面试经典150题】【双指针】392. 判断子序列

题目链接 https://leetcode.cn/problems/is-subsequence/?envTypestudy-plan-v2&envIdtop-interview-150 题解思路 首先如果s的长度大于t的长度&#xff0c;那么s肯定不是t的子序列如果s的长度等于t的长度&#xff0c;那么st的情况下s才是t的子序列如果s的长度小于t的长…...

编程日记 2024/6/15 19:53:15

禁用PS/Photoshop等一系列Adobe旗下软件联网外传用户数据操作

方案一&#xff1a; 下载火绒杀毒&#xff0c;在联网请求上禁用Adobe软件的联网请求&#xff0c;甚至还可以额外发现哪些是它要想要偷偷摸摸干的。 方案二&#xff1a; 最后注意&#xff1a; 用盗版软件只是获得了使用权&#xff01;...

编程日记 2024/6/15 19:52:14

C语言猜输赢游戏

目录 开头游戏的程序游戏的流程图结尾 开头 大家好&#xff0c;我叫这是我58&#xff0c;现在&#xff0c;请你看一下下面的游戏程序。 游戏的程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <Windows.h> int main() {int i 1;int ia 0…...

编程日记 2024/6/15 19:47:10

Rust 异步 trait 的实现困难

在 Rust 中&#xff0c;异步编程是使用 async/await 语法来实现的。与传统的同步编程不同&#xff0c;异步编程涉及到的特性较多&#xff0c;其中一个重要的特性是异步 trait。 异步 trait 是具有异步方法的 trait。在 Rust 中&#xff0c;trait 方法默认是同步的&#xff0c;…...

编程日记 2024/6/15 19:46:08

腾讯云和windows11安装frp，实现内网穿透

一、内网穿透目的 实现公网上&#xff0c;访问到windows上启动的web服务 二、内网穿透的环境准备 公网服务器、windows11的电脑、frp软件(需要准备两个软件&#xff0c;一个是安装到公网服务器上的&#xff0c;一个是安装到windows上的) frp下载地址下载版本 1.此版本(老版…...

编程日记 2024/6/15 19:45:07

Solidity智能合约事件(event)

文章目录 Solidity智能合约事件(event)什么是event事件event有什么作用日志内容位于区块链的什么地方&#xff1f;【重要】以太坊交易获取如何在 Solidity 中使用事件&#xff1f;参考 Solidity智能合约事件(event) 什么是event EVM有一个日志功能&#xff0c;用于将数据“写…...

编程日记 2024/6/15 19:44:06

第2章 Rust初体验7/8：错误处理时不关心具体错误类型的下划线：提高代码可读性：猜骰子冷热游戏

讲动人的故事，写懂人的代码 2.6.6 用as进行类型转换：显式而简洁的语法 贾克强：“大家在查看Rust代码时，可能会注意到这一句。在这里，如果我们不使用as i32，编译器会报错，因为它在u32中找不到abs()方法。这是因为prev和sum_of_two_dice都是u32类型，u32类型并不支持abs(…...

编程日记 2024/6/15 19:43:05

大话C语言：第24篇 预处理

1 C语言编译流程 C语言的编译流程包括&#xff1a; 预编译&#xff1a;将.c 中的头文件展开、宏展开&#xff0c;生成的文件是.i 文件。gcc指令&#xff1a;gcc -E file.c -o file.i 编译&#xff1a;将预处理之后的.i 文件生成 .s 汇编文件。gcc指令&#xff1a;gcc -S file…...

编程日记 2024/6/15 19:42:03

React如何配置路由

ReactTs配置路由 安装依赖 npm i react-router-dom在routers下面创建index.tsx import { RouteObject } from react-router-dom import React from react import PageA from /views/PageA import PageB from /views/PageB const routes: RouteObject[] [{path: /,element: …...

编程日记 2024/6/15 19:39:00

MAC使用初体验+入门

之前从来没有使用过MAC&#xff0c;这次拿到了一个 不得不说MAC度过适应期后用起来很舒服&#xff0c;续航长&#xff0c;触控板舒服&#xff0c;轻薄无比 我前期过度的时候记录的一部分快速指南&#xff0c;掌握如下一些电脑常识 可以做到正常使用了 基本操作 在 Mac 上使用桌…...

编程日记 2024/6/15 19:37:58

Go TOKEN机制与跨域处理方式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

编程日记 2024/6/15 19:36:57

JavaScript 的运行

语法分析预编译解释执行 1.语法分析 语法分析是 JavaScript 引擎处理代码的第一步。 在这个阶段&#xff0c;引擎将源代码字符串分解成一个个的词素&#xff08;token&#xff09;&#xff0c;这些词素是语言中有意义的最小单元&#xff0c;如关键字、变量名、操作符等。 语…...

编程日记 2024/6/15 19:35:56

园区地图导航系统：技术原理、部署方案与智能化应用解析

随着智能化时代的到来&#xff0c;园区管理面临诸多挑战。维小帮园区地图导航系统&#xff0c;采用前沿技术&#xff0c;为园区提供全面的导航解决方案&#xff0c;极大提升了园区管理效率和用户体验。 一、园区地图导航系统的功能特点 维小帮园区地图导航系统&#xff0c;以其…...

编程日记 2024/6/15 19:33:53

【数据结构】第十六弹---C语言实现希尔排序

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、希尔排序( 缩小增量排序 ) 1.1、预排序实现 1.2、希尔排序代码实现 1.3、代码测试 1.4、时空复杂度分析 1.5、性能比较 总结 上一弹我们…...

编程日记 2024/6/15 19:31:50

Pearcleaner：彻底清理Mac应用的终极免费开源解决方案

Pearcleaner&#xff1a;彻底清理Mac应用的终极免费开源解决方案 【免费下载链接】Pearcleaner A free, source-available and fair-code licensed mac app cleaner 项目地址: https://gitcode.com/gh_mirrors/pe/Pearcleaner 在Mac系统中卸载应用程序后&#xff0c;你是…...

编程新知 2026/5/13 13:05:03

终极天气API开发指南：从数据获取到可视化展示的完整流程

终极天气API开发指南&#xff1a;从数据获取到可视化展示的完整流程 【免费下载链接】Awesome_APIs :octocat: A collection of APIs 项目地址: https://gitcode.com/gh_mirrors/aw/Awesome_APIs 天气API是现代应用开发中不可或缺的组件&#xff0c;能够为用户提供实时天…...

编程新知 2026/5/13 10:41:47

化工仿真神器 Aspen 15.0：AI 赋能 + 绿氢专项，附下载安装教程

Aspen 15.0 是 工业流程模拟与数字化平台&#xff0c;核心为化工、石化、炼油、能源等行业提供全生命周期解决方案&#xff0c;从工艺设计、模拟优化到生产运维、绿色转型全覆盖&#xff0c;15.0 版本重点强化工业 AI、生成式 AI 能力&#xff0c;适配绿色能源与可持续发展需求…...

编程新知 2026/5/13 10:32:22

PyTorch Tensor运算的‘潜规则’：运算符重载（如a*b）与函数调用（torch.mul）到底选哪个？

PyTorch运算符重载与显式函数调用的工程实践指南 在PyTorch的日常开发中&#xff0c;我们经常面临一个看似简单却值得深思的选择&#xff1a;该用a b这样的运算符重载&#xff0c;还是显式调用torch.add(a, b)&#xff1f;这个选择不仅关乎代码风格&#xff0c;更影响着团队协…...

编程新知 2026/5/13 10:24:00

AI技能gate-of-oss：智能海巡GitHub，高效开源项目选型

1. 项目概述&#xff1a;一个帮你“海巡”GitHub的AI技能在软件开发这个行当里&#xff0c;我敢说&#xff0c;几乎每个开发者都经历过这样的时刻&#xff1a;为了解决一个具体问题&#xff0c;或者想给项目引入一个新功能&#xff0c;一头扎进GitHub的汪洋大海&#xff0c;试图…...

编程新知 2026/5/13 9:06:34

硬件对齐的稀疏注意力机制：原理、优化与实践

1. 硬件对齐的稀疏注意力机制概述在自然语言处理领域&#xff0c;Transformer架构已成为主流&#xff0c;但其核心组件——注意力机制的计算复杂度随序列长度呈平方级增长&#xff0c;这成为处理长文本的主要瓶颈。传统全注意力(Full Attention)需要计算每个查询(Query)与所有键…...

编程新知 2026/5/13 7:23:46

谷歌账户注册改用发短信验证，注重隐私者如何创建新账户成焦点？

谷歌账户注册方式变更 2026年3月8日下午2点20分&#xff0c;anon28387880称谷歌创建新账户时用二维码取代短信验证&#xff0c;自己试过无法再用二维码注册。扫描智能手机二维码会触发手机向谷歌发短信验证手机号。据说这是为安全考虑&#xff0c;能增加钓鱼难度&#xff0c;但…...

编程新知 2026/5/13 7:17:22

Deep Lake：统一多模态AI数据存储与向量检索的实践指南

1. 项目概述&#xff1a;Deep Lake&#xff0c;一个为AI而生的数据湖 如果你正在构建一个需要处理图像、文本、音频、PDF&#xff0c;甚至医学影像DICOM文件的大模型应用&#xff0c;或者你在训练一个需要高效加载海量数据的深度学习模型&#xff0c;那么你很可能正被数据管理…...

编程新知 2026/5/13 7:02:55

2026年主流地图API AI功能开发与零代码工具横评

核心观点摘要 行业趋势判断&#xff1a;AI与零代码正深度融合地图API开发&#xff0c;推动位置智能从专业编码向业务自助快速演进&#xff0c;2026年主流平台将在多模态数据融合与行业化场景能力上形成分水岭。选型关键维度&#xff1a;需综合考量数据覆盖广度、模型智能水平、…...

编程新知 2026/5/13 6:43:12

AI产品经理转型指南——传统PM如何不被淘汰

文章针对想转型AI产品经理但缺乏经验的人提供了实用的转型路径。首先&#xff0c;文章指出传统产品经理的焦虑源于视角受限&#xff0c;而非技术能力不足&#xff0c;并提出AI无法替代产品经理对用户、业务和组织的深度理解。接着&#xff0c;文章建议转型者从“用AI重做一遍”…...

编程新知 2026/5/13 4:49:20