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

跨框架探索:React Redux 和 Vuex 对比分析快速掌握React Redux

React Redux 和 Vuex 都是前端状态管理库,分别用于 React 和 Vue.js 框架。
redux运行过程图
在这里插入图片描述

它们都提供了一套规范的状态管理机制,帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点:

相同点:

  1. 中心化状态管理:两者都提供了一个全局的存储中心,使得组件间状态共享变得简单。
  2. 响应式:状态变更时,依赖于这些状态的所有组件都会自动更新。
  3. 调试工具:React Redux 和 Vuex 都有专门的开发者工具,方便调试。
  4. 社区和生态:两者都有强大的社区支持,提供了大量的中间件和插件。

不同点:

  1. 设计理念
    • React Redux 遵循 Flux 架构,强调单一数据源和单向数据流。
    • Vuex 更倾向于 Vue.js 的响应式特性和组件化思想,提供了更灵活的状态变更方式。
  2. API 使用
    • React Redux 需要使用 connect 函数将组件连接到 Redux store,同时使用 mapStateToPropsmapDispatchToProps 来指定组件如何从 store 中读取状态和分发动作。
    • Vuex 使用 store 实例直接在组件中分发动作和获取状态,通过 this.$store 在 Vue 组件中访问。
  3. 状态变更方式
    • React Redux 通过 dispatch 方法发送一个动作(action)到 store,由 reducer 根据动作类型更新状态。
    • Vuex 提供了 commitdispatch 两个方法,commit 用于提交一个变更(mutation),而 dispatch 用于分发一个动作(action)。Vuex 的 mutation 必须是同步的,而 action 可以包含任意异步操作。
  4. 模块化
    • React Redux 通过 combineReducers 将多个 reducer 合并成一个根 reducer,从而实现模块化。
    • Vuex 允许将 store 分割成模块(module),每个模块拥有自己的 state、mutation、action 和 getter。
  5. 辅助函数和中间件
    • React Redux 常用 redux-thunk 等中间件来处理异步逻辑。
    • Vuex 自身就支持异步操作的处理,并且有 mapStatemapGettersmapActionsmapMutations 等辅助函数简化模板代码。
  6. 与框架的集成度
    • React Redux 更像是 React 生态系统的一部分,与 React 的 Context API 紧密集成。
    • Vuex 深度集成到 Vue.js 中,例如使用 Vue 的响应式系统来跟踪状态变化。
      为了快速掌握 React Redux,你可以遵循以下步骤:
  7. 理解 Redux 基础概念:熟悉 Redux 的三个核心概念:store、action 和 reducer。
  8. 学习 React Redux API:掌握 connectProvidermapStateToPropsmapDispatchToProps 的使用。
  9. 实践:通过小项目来实践 React Redux 的使用,例如一个简单的 TODO 应用。
  10. 了解异步处理:学习如何使用 redux-thunkredux-saga 等中间件处理异步逻辑。
  11. 阅读文档和社区资源:官方文档是学习的好地方,同时也可以查看社区提供的教程和最佳实践。

React Redux 和 Vuex 各有特点,理解它们的设计理念和 API 使用方式,可以帮助你更好地应用它们于实际项目中。

下面是 React Redux 和 Vuex 的简单示例代码,用于展示如何在各自的框架中管理状态。

在这里插入图片描述

React Redux 示例(class组件)

首先,我们定义一个简单的 Redux store,包括一个 reducer 和一个 action。

// Redux 的 reducer
const counterReducer = (state = { count: 0 }, action) => {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };case 'DECREMENT':return { count: state.count - 1 };default:return state;}
};
// Redux 的 action creator
const increment = () => {return { type: 'INCREMENT' };
};
const decrement = () => {return { type: 'DECREMENT' };
};
// 创建 Redux store
const store = Redux.createStore(counterReducer);

然后,我们创建一个 React 组件,并通过 connect 函数将其连接到 Redux store。

// React 组件
class Counter extends React.Component {render() {const { count, increment, decrement } = this.props;return (<div><button onClick={increment}>+</button><span>{count}</span><button onClick={decrement}>-</button></div>);}
}
// 将 Redux state 和 action 映射到组件的 props
const mapStateToProps = (state) => {return {count: state.count};
};
const mapDispatchToProps = (dispatch) => {return {increment: () => dispatch(increment()),decrement: () => dispatch(decrement())};
};
// 连接 React 组件和 Redux store
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

最后,我们使用 Provider 组件将 store 传递给整个应用程序。

ReactDOM.render(<Provider store={store}><ConnectedCounter /></Provider>,document.getElementById('root')
);

React Redux 示例(函数式组件)

通常使用 Hooks 来与 Redux 进行交互。下面是一个使用 React Redux 的函数式组件示例,它展示了如何使用 useSelectoruseDispatch Hooks 来读取 Redux store 中的状态和分发 actions。
首先,我们定义一个简单的 Redux store,包括一个 reducer 和一些 actions。

// Redux 的 reducer
const counterReducer = (state = { count: 0 }, action) => {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };case 'DECREMENT':return { count: state.count - 1 };default:return state;}
};
// Redux 的 action creator
const increment = () => {return { type: 'INCREMENT' };
};
const decrement = () => {return { type: 'DECREMENT' };
};
// 创建 Redux store
const store = Redux.createStore(counterReducer);

然后,我们创建一个函数式组件,并使用 useSelectoruseDispatch Hooks。

// React 函数式组件
const Counter = () => {// 使用 useSelector Hook 来访问 Redux store 中的状态const count = useSelector(state => state.count);// 使用 useDispatch Hook 来获取 dispatch 函数const dispatch = useDispatch();// 组件渲染的内容return (<div><button onClick={() => dispatch(increment())}>+</button><span>{count}</span><button onClick={() => dispatch(decrement())}>-</button></div>);
};

最后,我们使用 Provider 组件将 store 传递给整个应用程序。

import { Provider } from 'react-redux';
ReactDOM.render(<Provider store={store}><Counter /></Provider>,document.getElementById('root')
);

在这个示例中,useSelector Hook 用于从 Redux store 中选择出我们需要的部分状态,而 useDispatch Hook 用于获取 dispatch 函数,以便我们可以在组件中分发 actions。这样的函数式组件更加简洁,并且易于理解和使用。

Vuex 示例

首先,我们定义一个 Vuex store,包括 state、mutation 和 action。

// Vuex 的 store
const store = new Vuex.Store({state: {count: 0},mutations: {INCREMENT(state) {state.count++;},DECREMENT(state) {state.count--;}},actions: {increment({ commit }) {commit('INCREMENT');},decrement({ commit }) {commit('DECREMENT');}}
});

然后,我们创建一个 Vue 组件,并通过 this.$store 访问 Vuex store。

// Vue 组件
const Counter = {template: `<div><button @click="increment">+</button>{{ count }}<button @click="decrement">-</button></div>`,computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.dispatch('increment');},decrement() {this.$store.dispatch('decrement');}}
};

最后,我们创建一个 Vue 实例,并将 Vuex store 作为选项传递。

new Vue({el: '#app',store,components: { Counter },template: `<Counter />`
});

这两个示例展示了如何在 React Redux 和 Vuex 中创建一个简单的计数器应用程序。在 React Redux 中,我们使用 connect 函数将 Redux store 的状态和分发动作映射到 React 组件的 props。而在 Vuex 中,我们直接在 Vue 组件中使用 this.$store 来访问状态和分发动作。

相关文章:

跨框架探索:React Redux 和 Vuex 对比分析快速掌握React Redux

React Redux 和 Vuex 都是前端状态管理库&#xff0c;分别用于 React 和 Vue.js 框架。 它们都提供了一套规范的状态管理机制&#xff0c;帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点&#xff1a; 相同点&#xff1a; 中心化状态管理&#xff1a;两者都提…...

第十五届蓝桥杯省赛C/C++大学B组真题及赛后总结

目录 个人总结 C/C 组真题 握手问题 小球反弹 好数 R 格式 宝石组合 数字接龙 爬山 拔河 ​编辑 再总结及后续规划 个人总结 第一次参加蓝桥杯&#xff0c;大二&#xff0c;以前都在在学技术&#xff0c;没有系统的学过算法。所以&#xff0c;还是花了挺多时间去备…...

【Qt踩坑】ARM 编译Qt5.14.2源码-QtWebEngine

1.下载源码 下载网站&#xff1a;Index of /new_archive/qt/5.14/5.14.2/single 2.QWebEngine相关依赖 sudo apt-get install flex libicu-dev libxslt-dev sudo apt-get install libssl-dev libxcursor-dev libxcomposite-dev libxdamage-dev libxrandr-dev sudo apt-get …...

SQL语法 case when语句用法讲解

CASE WHEN解释 &#xff1a; SQL中的CASE WHEN语句是一种条件表达式&#xff0c;它允许你根据不同的情况返回不同的值。CASE WHEN通常用于SELECT语句中&#xff0c;用于创建新的列&#xff0c;该列的值取决于其他列的值。CASE WHEN可以用于任何可以使用表达式的地方。 大致概…...

Project Euler_Problem 193_Few Repeated Digits_欧拉筛+容斥公式

解题思路&#xff1a;暴力搜索 代码&#xff1a; void solve() {ll i, j,k,x,y,z,p,q,u,v,l,l1;N 999966663333, NN 1024;//N 1000;double a, b, c,d;M.NT.get_prime_Euler(1000000);l M.NT.pcnt;for (i 1; i < l; i) {u M.NT.prime[i];v M.NT.prime[i 1];x u * …...

排序算法-基数排序

基数排序是一种非比较排序算法&#xff0c;它将待排序的数字按照位数进行排序。基数排序的思想是先按照个位数进行排序&#xff0c;然后按照十位数进行排序&#xff0c;接着按照百位数进行排序&#xff0c;以此类推&#xff0c;直到最高位排序完成。 基数排序的步骤如下&#x…...

ChatGPT在线网页版

ChatGPT镜像 今天在知乎看到一个问题&#xff1a;“平民不参与内测的话没有账号还有机会使用ChatGPT吗&#xff1f;” 从去年GPT大火到现在&#xff0c;关于GPT的消息铺天盖地&#xff0c;真要有心想要去用&#xff0c;途径很多&#xff0c;别的不说&#xff0c;国内GPT的镜像…...

5.SpringSpringBoot八股

Spring,Spring MVC,Spring Boot 之间什么关系? Spring就是整个Spring框架的整体&#xff0c;包含AOP、JDBC、Spring MVC等等模块 SpringBoot是Spring的精简版&#xff0c;它在Spring的基础上添加了自动装配、内置tomcat服务器等功能&#xff0c;使得代码量更少&#xff0c;同…...

0基础刷图论最短路 3(从ATcoder 0分到1800分)

AT最短路刷题3&#xff08;本文难度rated 1200~ 1400&#xff09; 题目来源&#xff1a;Atcoder 题目收集&#xff1a; https://atcoder-tags.herokuapp.com/tags/Graph/Shortest-Path &#xff08;里面按tag分类好了Atcoder的所有题目&#xff0c;类似cf&#xff09; &#x…...

k8s+docker一键安装过程

环境: k8s 1.20 docker 20.10 centos7.9 #docker安装 yum install -y epel-release yum install -y yum-utils yum-config-manager --add-repo https://mirrors.ustc.edu.cn/docker-ce/linux/centos/docker-ce.repo yum install -y docker-ce-20.10.6 docker-ce-cli-2…...

Python3+Appium+Android SDK+真机+实现app自动化测试-基于Red Hat7.9版本搭建环境及运行python脚本。

1、总体概述? 收费有收费的服务,那就是细致。Red Hat9.0自动化环境也有,需要的说一声。 1、实现在Red Ha/t Enterprise Linux7.9环境中搭建部署app自动化测试环境,提供详细步骤。 2、版本说明:jdk8/17+nodejs16/18/19/20/21+android sdk29+python3.9.18/3.11.1+appium1…...

深入理解MD5算法:原理、应用与安全

title: 深入理解MD5算法&#xff1a;原理、应用与安全 date: 2024/4/11 20:55:57 updated: 2024/4/11 20:55:57 tags: MD5算法数据安全哈希函数摘要算法安全漏洞SHA算法密码学 第一章&#xff1a;引言 导言 在当今数字化时代&#xff0c;数据安全和完整性变得至关重要。消息…...

架构师系列-搜索引擎ElasticSearch(三)- Java API

SpringBoot整合ES 搭建SpringBoot工程&#xff0c;引入ElasticSearch相关坐标 <!--引入es的坐标--><dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><versi…...

Ubuntu下配置Android NDK环境

Android-NDK的下载 下载Android-NDK wget -c http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin 执行bin文件&#xff08;即解压&#xff09; ./android-ndk-r10c-linux-x86_64.bin Android-NDK的配置 要想使用Android-NDK&#xff0c;还需要进行环境变量…...

使用 vue3-sfc-loader 加载远程Vue文件, 在运行时动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤

加载远程Vue文件 vue3-sfc-loader vue3-sfc-loader &#xff0c;它是Vue3/Vue2 单文件组件加载器。 在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境&#xff0c;无需 (webpack) 构建步骤。 主要特征 支持 Vue 3 和 Vue 2&#xff08;参见dist/&#xff09;仅需…...

stm32移植嵌入式数据库FlashDB

本次实验的程序链接stm32f103FlashDB嵌入式数据库程序资源-CSDN文库 一、介绍 FlashDB 是一款超轻量级的嵌入式数据库&#xff0c;专注于提供嵌入式产品的数据存储方案。与传统的基于文件系统的数据库不同&#xff0c;FlashDB 结合了 Flash 的特性&#xff0c;具有较强的性能…...

Ubuntu 安装Java、Git、maven、Jenkins等持续集成环境

Ubuntu 持续集成 安装OpenJdk 查看所有可安装的 JDK 版本 apt list OpenJDK\*使用 apt 安装 JDK&#xff08;以 11为例&#xff09;,最好是用11&#xff0c;java8对应的jenkins会有兼容问题。 sudo apt install openjdk-11-jdk openjdk-11-jre安装成功后&#xff0c;可以使用以…...

文件批量重命名并批量修改文件扩展名,支持随机大小写字母命名并修改扩展名字母

在数字时代&#xff0c;文件的管理和整理成为了我们日常工作与生活中不可或缺的一部分。然而&#xff0c;面对堆积如山的文件&#xff0c;如何高效地对其进行重命名和修改扩展名&#xff0c;成为了许多人的难题。 第一步&#xff0c;进入文件批量改名高手的主页面&#xff0c;…...

【管理咨询宝藏70】MBB大型城投集团内外部环境分析报告

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏70】MBB大型城投集团内外部环境分析报告 【格式】PDF版本 【关键词】战略规划、商业分析、管理咨询、MBB顶级咨询公司 【强烈推荐】 这是一套市…...

服务器挖矿病毒解决ponscan,定时任务解决

服务器挖矿病毒解决ponscan&#xff0c;定时任务解决 挖矿病毒会隐藏chattr的操作权限&#xff0c;让我们无法删除病毒文件&#xff0c;杀掉病毒进程。所以要去下载chattr.c的文件&#xff0c;编译成a.out。然后再对原来的chattr文件的权限进行修改。然后覆盖掉它。 chattr.c …...

【鸿蒙开发】第二十一章 Media媒体服务(二)--- 音频播放和录制

1 AVPlayer音频播放 使用AVPlayer可以实现端到端播放原始媒体资源&#xff0c;本开发指导将以完整地播放一首音乐作为示例&#xff0c;向开发者讲解AVPlayer音频播放相关功能。 以下指导仅介绍如何实现媒体资源播放&#xff0c;如果要实现后台播放或熄屏播放&#xff0c;需要…...

网络安全从入门到精通(特别篇I):Windows安全事件应急响应之Windows应急响应基础必备技能

Windows应急 询问攻击情况范围 事件发生时的状况或安全设备告警等,能帮助应急处置人员快速分析确定事件类型,方便前期准备。 通用排查思路 入侵肯定会留下痕迹,另外重点强调的是不要一上来就各种查查查,问清楚谁在什么时间发现的主机异常情况,异常的现象是什么,受害用…...

基于SpringBoot+Mybatis框架的私人影院预约系统(附源码,包含数据库文件)

基于SpringBootMybatis框架的私人影院预约系统&#xff0c;附源码&#xff0c;包含数据库文件。 非常完整的一个项目&#xff0c;希望能对大家有帮助哈。 本系统的完整源码以及数据库文件都在文章结尾处&#xff0c;大家自行获取即可。 项目简介 该项目设计了基于SpringBoo…...

【SERVERLESS】AWS Lambda上实操

通过Serverless的发展历程及带给我们的挑战&#xff0c;引出我们改如何改变思路&#xff0c;化繁为简&#xff0c;趋利避害&#xff0c;更好的利用其优势&#xff0c;来释放企业效能&#xff0c;为创造带来无限可能。 一 Serverless概述 无服务器计算近年来与云原生计算都是在…...

IDEA2023 开发环境配置

目录 1. 关闭IDEA自动更新1.2 IDEA 新版样式切换 2. Maven配置2.1本地仓库优先加载2.2 maven.config配置文件中 3. 全局配置JDK4. 配置文件编码:UTF-85. 开启自动编译&#xff08;全局配置&#xff09;6. 开启自动导包7. 开启鼠标悬浮&#xff08;提示文档信息&#xff09;8. 设…...

YOLOV5 + 双目相机实现三维测距(新版本)

文章目录 YOLOV5 双目相机实现三维测距&#xff08;新版本&#xff09;1. 项目流程2. 测距原理3. 操作步骤和代码解析4. 实时检测5. 训练6. 源码下载 YOLOV5 双目相机实现三维测距&#xff08;新版本&#xff09; 本文主要是对此篇文章做一些改进&#xff0c;以及解释读者在…...

【计算机网络】(一)计算机网络概述

文章目录 【计算机网络】&#xff08;一&#xff09;计算机网络概述前言1.1 计算机网络在信息时代中的作用1.2 互联网概述1.2.1 网络的网络1.2.2 互联网基础结构发展的三个阶段1.2.3 互联网标准化工作 1.3 互联网的组成1.3.1 互联网的边缘部分1.3.2 互联网的核心部分 1.4 计算机…...

前端npm常用命令总结

npm&#xff08;Node Package Manager&#xff09;是Node.js的包管理器&#xff0c;用于安装和管理Node.js的依赖库。以下是一份npm命令的总结文档&#xff0c;涵盖了常用的npm命令及其功能&#xff1a; 包相关的 安装和卸载包 npm install &#xff1a;安装指定名称的包。n…...

[尚硅谷flink] 检查点笔记

在Flink中&#xff0c;有一套完整的容错机制来保证故障后的恢复&#xff0c;其中最重要的就是检查点。 文章目录 11.1 检查点11.1.1 检查点的保存1&#xff09;周期性的触发保存2&#xff09;保存的时间点3&#xff09;保存的具体流程 11.1.2 从检查点恢复状态11.1.3 检查点算法…...

JVM虚拟机(五)强引用、软引用、弱引用、虚引用

目录 一、强引用二、软引用三、弱引用四、虚引用五、总结 引文&#xff1a; 在 Java 中一共存在 4 种引用&#xff1a;强、软、弱、虚。它们主要指的是&#xff0c;在进行垃圾回收的时候&#xff0c;对于不同的引用垃圾回收的情况是不一样的。下面我们就一起来看一下这 4 种引用…...

建站优化内容/百度客服电话人工服务热线电话

df命令磁盘分区空间du命令查看文件大小磁盘分区磁盘格式化磁盘挂载mount手动增加swap空间lvm讲解一、df命令磁盘分区空间使用df可以查看文件系统的使用情况(即磁盘分区空间)&#xff0c;linux系统必须通过挂载点才能查看磁盘的内容。第一列&#xff1a;磁盘分区的名字第二列&am…...

wordpress排版代码/中国新闻最新消息

在 微服务的服务间通信与服务治理 一文中&#xff0c;我们提到扇贝目前的 Service Mesh 架构是基于 Envoy 来做的。 本文的主角就是这个新秀 Envoy 抛弃了 Nginx, 选择了 Envoy 其实之前扇贝是大量使用 Nginx 的&#xff0c;无论是对于其部署&#xff0c;配置还是调优都更为有经…...

做恋爱方面的网站/seo搜索优化待遇

中国矿业大学教职工代表大会第一次会议暨工会会员中国矿业大学第八届教职工代表大会暨第十四届工会会员代表大会第一次会议代表团代表名单(以姓氏笔画为序)(共18个代表团593名代表&#xff0c;其中&#xff1a;正式代表368人、特邀代表 30人、列席代表 195 人)矿业工程学院、安…...

信誉好的东莞网站设计/宁宁网seo

微信支持自动登录后&#xff0c;确实会方便很多&#xff0c;不再需要每次掏出手机再点一下&#xff0c;也不用摆弄手机扫码&#xff0c;更加人性化了。不过&#xff0c;有很多网友反映称&#xff0c;如果电脑上几天没登录微信&#xff0c;下次登录依旧需要在手机上点确认。此外…...

河南一情况/优化seo教程技术

使用特征组合来自动检测视频中的人物 KunWang, Guitao Cao*, Dan Meng, Weiting Chen, Wenming Cao 计算机科学与软件工程学院 华东师范大学 上海&#xff0c;中国200062 通讯作者Email&#xff1a;gtcaosei.ecnu.edu.cn 深圳大学信息工程学院 深圳 中国 518060 共同作者Ema…...

郑州网站建设微信小程序/营销型企业网站建设步骤

Maven下载与安装 1、下载1&#xff09;Maven的系统要求&#xff1a; Maven对内存和操作系统没有要求 Maven安装本身仅需大约10MB&#xff0c;本地仓库视使用情况有所不同 Maven3.3及以上版本需要JDK1.7及以上&#xff08;截至今日&#xff0c;Maven官网提供的最新版本为3.5.2&a…...