搜索
首页web前端js教程在React中使用Redux的实例详解

在React中使用Redux的实例详解

Jun 29, 2017 am 09:58 AM
reactredux使用

这是Webpack+React系列配置过程记录的第六篇。其他内容请参考:

  • 第一篇:使用webpack、babel、react、antdesign配置单页面应用开发环境

  • 第二篇:使用react-router实现单页面应用路由

  • 第三篇:优化单页面开发环境:webpack与react的运行时打包与热更新

  • 第四篇:React配合Webpack实现代码分割与异步加载

  • 第五篇:分离Webpack开发环境与生产环境的配置

  • 第六篇:在React中使用Redux

这篇文章的主要内容包括: 1. 修改一下之前存在的问题; 
2. 在框架中引入redux,使用一个例子简单介绍redux的使用方法; 
3. 其他redux辅助库。

修复遗留问题

  1. webpack.prod.config.js中缺少了对path库的引用,执行构建npm run build:prod的时候失败。在文件开始的地方引入node.js的path库就可以了。

  2. package.json里面定义了一个build:dev的脚本,这个脚本其实有点多余,不过有时候需要打包测试版本的文件,所以还是需要存在。主要有个问题是webpack.dev.config.js中output节点下错误定义了path的值为根目录'/',这在使用npm start命令启动运行时打包的时候看不出问题,但是在使用npm run build:dev时会出现无法写文件到根目录的权限错误。只要把path的值改掉就可以。path: config.publicPath改成path: config.staticPath,publicPath: config.publicPath

  3. css-loader和less-loader导出的样式类名太长,还是把localIdentName中的path部分去掉比较好看。

redux

安装redux

安装依赖的命令如下:

npm install --save redux react-redux redux-thunk  
npm install --save-dev redux-logger

redux不用说了,我是把它当成一个本地数据库使用,react-redux帮助你完成数据订阅,redux-thunk可以放你实现异步action,redux-logger是redux的日志中间件。

关于redux与代码布局

在开始介绍之前我想先就redux的使用发表一些自己的看法:

前文说了我把redux当成一个本地数据库,因此我倾向于把redux封装类似于mvc中的Model的角色,独立为一层。这与另一种观点——我在公司的项目更倾向于把每个页面当成一个独立模块,每个模块维护自己的reducer和action的观点,有所出入。

我的做法可以更好地实现reducer的复用。而对我自己来说更重要的好处是集中修改。更适合小项目或者独自开发一个项目的场景。

我公司的项目的做法对多人协同开发更有利,毕竟每个人维护好自己的代码就可以了。公司项目的这种方法有几个问题让我比较难以接受:

第一个是模块越多reducer和action的定义越多,很多时候这些代码都是差不多的。

更重要的是第二个问题:模块数据在store里面的存储是直接在根state下面排列下来的,根state的数据格式样式有点像这样:

{
    aModuleData:{...},
    bModuleData:{...},
    cModuleData:{...},
    dModuleData:{...},
    ...
}

项目的原意是希望每个模块的保持独立,但实际上使用的时候却是有极大的可能出现aModule同时使用aModuleData和bModuleData的情况。这跟每个人维护自己的代码的初衷有悖,也没有发挥好redux的真正能力。

还有一个小问题是reducer的组织通常影响着应用数据state的样式,把reducer分散到每个模块之后,state的形式在代码上很难直管地反映出来,特别是当模块是动态加载的时候更甚。不过借助logger等工具可以解决。

关于这块的争议Redux的教程中有提及。

使用redux

无论代码怎么布局,使用redux的方法主要还是三步曲:创建store、创建action、创建reducer。而在这之后才是与业务或者组件相关的数据处理和展示。

先看一下我的做法的代码布局:

代码布局

创建store的代码集中在model/index.js中,model/actions/.js和model/reducer/.js里面分别是写action创建函数和reducer函数的地方,根据模块可以自己DIY。

model/index.js的代码如下:

model/index.js的代码

model/actions/index.js的代码如下:

model/actions/index.js的代码

这里定义了一个名叫login的异步actionCreator以及三个普通的actionCreator。

actionCreator被某个组件调用后会向store发送action,然后被reducer处理,reducer定义在model/reducers/index.js中,代码如下:

model/reducers/index.js的代码

这就完成了三步曲了。上面的代码简单地模拟了登录的动作。登录页面用到的数据存放在loginPageData中,登陆后获取到的当前登录用户数据存储在实体数据entities中。

接下来要把redux和react联系起来,也就是把redux的store中的数据交给react的组件使用。

第一步需要挂载redux的store到react,为react提供数据支持。最简单的做法是找到应用的根组件(我这里是BasicExample.js),然后在它的render函数中最外层添加Providor标签。代码片段如下:

挂载redux的store到react

红线部分画出了改动点,从model/index.js中导出了store对象,通过react-redux提供的Providor标签挂载到react中,为react提供数据支持。

看最后的红线中,我们在Home组件里面添加了这次的测试例子ReduxDemo。它的代码如下:

ReduxDemo代码

代码的重点在connect函数。这个函数也是由react-redux提供的。使用它可以包装普通的展示组件(这里是ReduxDemo——只负责展示数据),然后返回一个容器组件。connect函数通过第一个参数让展示组件订阅了来自store的数据;通过第二个参数让展示组件默认可以dispatch各种action。

这个例子在ReduxDemo挂载完成后调用login接口模拟登陆。返回结果被塞到store中(数据格式由先前写好的reducers的组织方式决定)。页面根据store中的数据展示内容。由于login发出的远程请求是假的,所以这里总是失败,因此会显示失败的内容。

关于redux的使用介绍到此结束。

redux辅助库

其实在上面的代码中我已经悄悄地提及了两个辅助库,也是我想在这里推荐的两个库:

  1. 开发工具redux-devtools:结合各种其他库可以实现可视化的调试界面。

  2. 数据规范化工具normalizr:规范化组织数据。经过三个项目的体验后,个人非常推荐使用这个库,可以让应用的数据组织更清晰、减少冗余数据、减少因数据刷新导致的性能影响。

暂时不在这里展开介绍,有兴趣的可以到github上查一下文档。

以上是在React中使用Redux的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
超越浏览器:现实世界中的JavaScript超越浏览器:现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

使用Next.js(后端集成)构建多租户SaaS应用程序使用Next.js(后端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js(前端集成)构建多租户SaaS应用程序如何使用Next.js(前端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript:探索网络语言的多功能性JavaScript:探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的演变:当前的趋势和未来前景JavaScript的演变:当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript:它的作用以及为什么重要神秘的JavaScript:它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python还是JavaScript更好?Python还是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安装JavaScript?如何安装JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具