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

react学习-redux快速体验

news 2025/9/8 4:46:34

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快速体验

相关文章：

react学习-redux快速体验

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

记C#优化接口速度过程

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

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

vue中v-bind控制class和style

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

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

C语言猜输赢游戏

Rust 异步 trait 的实现困难

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

Solidity智能合约事件(event)

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

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

React如何配置路由

MAC使用初体验+入门

Go TOKEN机制与跨域处理方式

JavaScript 的运行

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

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

vscode里如何用git

SkyWalking 10.2.0 SWCK 配置过程

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

在rocky linux 9.5上在线安装 docker

srs linux

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

Linux云原生安全：零信任架构与机密计算

css3笔记（1）自用