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

react学习-redux快速体验

news 2026/3/28 9:30:22

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

【latex】探索LaTeX中加粗文本的多种方法及其在表格中的优化应用

1. LaTeX加粗文本的多种方法对比 第一次用LaTeX写论文时&#xff0c;我也以为\textbf{}是唯一的加粗方式。直到在表格里发现加粗后的文字会把单元格撑变形&#xff0c;才意识到LaTeX的文本修饰比想象中复杂得多。经过反复测试&#xff0c;我发现实际有5种常用加粗方法&#xf…...

编程新知 2026/3/28 8:41:55

BEYOND REALITY Z-Image创意玩法：用AI生成不同风格的人物肖像

BEYOND REALITY Z-Image创意玩法&#xff1a;用AI生成不同风格的人物肖像 1. 认识BEYOND REALITY Z-Image创作引擎 BEYOND REALITY SUPER Z IMAGE 2.0是一款基于Z-Image-Turbo Transformer架构的高精度写实人像生成模型。它通过BF16高精度推理和专属优化算法&#xff0c;能够…...

编程新知 2026/3/28 7:49:22

告别Salesforce！这5个开源AI CRM项目，帮你用更低成本打造专属客户管理系统

开源AI CRM革命&#xff1a;5个低成本替代方案深度评测与技术选型指南 当Salesforce的年费账单突破六位数时&#xff0c;越来越多的技术决策者开始将目光转向开源生态。这不是简单的成本妥协&#xff0c;而是一场关于数据主权、技术栈控制和AI原生体验的范式转移。以下是经过三…...

编程新知 2026/3/28 7:12:56

用快马ai五分钟生成java学习路线可视化原型，清晰规划你的编程进阶之路

今天想和大家分享一个特别实用的Java学习路线可视化工具的开发过程。作为一个Java初学者&#xff0c;我经常被各种知识点搞得晕头转向&#xff0c;直到发现用InsCode(快马)平台可以快速搭建一个学习路线图&#xff0c;整个开发过程只用了不到半小时&#xff0c;效果却出奇地好。…...

编程新知 2026/3/28 4:23:59

Linux性能调优实战：CPU与内存优化指南

Linux 性能调优实战指南1. 性能优化基础概念1.1 性能指标Linux性能优化的两个核心指标是吞吐量和延迟。从应用负载角度看&#xff0c;直接影响终端用户体验&#xff1b;从系统资源角度看&#xff0c;关注资源使用率和饱和度。性能问题的本质是系统资源已达瓶颈但请求处理不够快…...

编程新知 2026/3/28 3:37:36

Welch‘s t-test实战指南：从原理到Python实现

1. 为什么你需要Welchs t-test&#xff1f; 做数据分析时&#xff0c;经常会遇到这样的场景&#xff1a;你想比较两组数据的平均值是否有显著差异&#xff0c;但发现这两组数据的方差不一样&#xff0c;样本量也不同。这时候传统的Students t-test就不太适用了&#xff0c;因为…...

编程新知 2026/3/28 3:37:31

Unity卡牌UI框架实战：构建高性能游戏界面的深度策略

Unity卡牌UI框架实战&#xff1a;构建高性能游戏界面的深度策略 【免费下载链接】UiCard Generic UI for card games like Hearthstone, Magic Arena and Slay the Spire... 项目地址: https://gitcode.com/gh_mirrors/ui/UiCard 在卡牌游戏开发领域&#xff0c;UI交互的…...

编程新知 2026/3/28 1:58:18

RTC成语音AI基础设施：AWS和ElevenLabs相继跟进，ZEGO已跑三年

2026 年 3 月&#xff0c;语音 AI 领域迎来一个值得关注的技术信号&#xff1a;AWS&#xff08;亚马逊云科技&#xff09;与 ElevenLabs 在同一个月内相继宣布支持 WebRTC 协议。这一时间上的高度吻合&#xff0c;折射出行业对实时语音交互底层架构的共同判断&#xff1a;传统 …...

编程新知 2026/3/28 1:50:04

亚马逊爆款选品：数据采集与三方服务商对接

一、核心选品数据采集渠道1. 官方免费数据源&#xff08;合规权威&#xff09;BSR畅销榜&#xff1a;查看类目热销品&#xff0c;定位头部爆款。新品榜&#xff1a;挖掘增速快、潜力大的新品。商机探测器&#xff1a;卖家后台直达&#xff0c;获取高搜索量、低竞争蓝海词。品牌…...

编程新知 2026/3/28 0:37:28

JetBrains推出AI智能体管理平台Central

为了帮助开发者控制日益增长的AI编程智能体队伍&#xff0c;JetBrains正在推出JetBrains Central&#xff0c;这是一个面向团队的智能体开发平台&#xff0c;用于管理和维持对这些智能体的监督。JetBrains Central的早期访问计划将于2026年第二季度开始&#xff0c;将有限量的设…...

编程新知 2026/3/28 0:01:11