Redux使用技巧（Redux第三弹）

最新推荐文章于 2024-09-01 15:24:00 发布
最新推荐文章于 2024-09-01 15:24:00 发布
阅读量131 收藏
点赞数
分类专栏： 前端知识——Redux 文章标签： reactjs 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46687501/article/details/120869085
版权
本文是关于Redux使用技巧的分享，重点介绍了两种优化方式：一是将action中的type值抽取到单独文件，以提高代码复用性和错误定位效率；二是将action函数集中管理，创建独立文件，方便组件导入和使用。这些技巧对于大型项目能有效提升开发效率。
摘要由CSDN通过智能技术生成

Redux使用技巧（Redux第三弹）

提示：本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！

技巧一：把action中的type值抽离成单独的文件

  • 在组件内部写多个action，action的type值需要在reducer中获取并判断，这个type值很容易在书写过程中写错，从而导致你很难发现到底是哪里出现了错误，另外某个action可能在项目中多次使用，如果你在每个组件中都写一个，那样代码的复用性不高，基于以上两点，我们可以把这些action的type单独抽离出来，定义成常量
    在这里插入图片描述

  • 在使用到的页面进行引入
    在这里插入图片描述

  • 把type值进行替换
    在这里插入图片描述

  • 在reducer.js中也使用了type值，也可以这样进行替换

  • <
最低0.47元/天 解锁文章
勤劳的多肉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023年前端面试汇总-React
越陌度阡
06-29 795
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2284
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
redux的使用技巧
qq_39261142的博客
07-13 332
Redux Redux在任何地方都可用，不只是运用于React redux用于state的管理，管理的是在整个网站各个地方都通用的state，但是不去管理那些只作用于组件自身的state npm install redux -save 作用：将特定的state属性全局向需要用到该state的组件传递，该state属性全局唯一（类似static属性），只能通过action进行修改，且修改后影响全局 要点 项目中所有的state都以一个对象树的形式存储在一个单一的store中 只有触发action
Redux知识总结与使用技巧
X1432564581的博客
05-06 223
Redux的机制可以用下面这张图来概括： 1、 store store可以看成一个容器，是我们用来保存数据的地方。整个应用中只能有一个store。 2、 state 前面说到的store对象中包含我们整个应用中所有的数据。如果想得到某个时间节点的数据，通过store就能拿到那个时间节点的数据集合。这种数据集合就叫做state，通过store.getState()可以拿到当前时刻的state。 3...
Redux DevTools插件使用中间件无法获取到redux中的数据
weixin_60719972的博客
06-14 333
Redux DevTools插件使用中间件无法获取到redux中的数据
Redux 处理异步 Action
weixin_30593261的博客
09-21 99
redux-promise-utils What redux-promise-utils 是一个基于 redux-thunk 和 redux-actions 的工具，符合 FSA 规范，方便开发者处理异步 Action，减少大量冗余的 template 代码。 Why redux 一开始的设计就是用于处理同步的 Action。通过调用 Action 函数后 dispatch 返回的 type 和 ...
React，Redux面试题
qq_48962360的博客
09-28 2897
React和Redux面试题
iOS 强大第三方资源库
热门推荐
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
一些前端大牛都在学习的github库
孙叫兽的博客
03-02 2251
前端知识比较杂，长时间的工作容易沉浸在业务当中，技术提升有限，这里发现了前端的新大陆，可以帮助小伙伴们巩固基础知识，完善自己的知识体系，欢迎点赞收藏，兄弟们，赶紧干起来吧！1.JavaSc...
react-redux的异步action跨域获取数据（中间件thunk以及redux-promise-middleware的使用）
weixin_43433884的博客
02-14 1238
react中跨域获取数据的过程 首先进行跨域的设置 在项目src目录下添加一个setupProxy.js的文件 const proxy = require(&quot;http-proxy-middleware&quot;); module.exports = (app) =&amp;gt; { app.use(&quot;/api&quot;, proxy({//api是随便写的 target: &quot;&quot;,/
redux ts(typescrip) reducer中action的类型检查
twinkle的博客
04-30 1014
本人在写reducer中的action类的时候发现一些问题。为啥我的类型检查没有，过不了。后面实现了改功能，特在此记一笔。好记性不如烂笔头。 效果 我们就是要实现一个类似上图的效果，在每一个type中，action的类型是不一样。实现方式看下面的成功案例 成功案例 实现的业务场景，我想实现一个用户管理的功能，可以新增用户，删除，修改用户等。 每一个功能都是独立的并且所需要的参数是不一样的，所以做了以下类型检查。 公共类型 // common.ts // 公共类型 // 枚举每一个type类型。.
redux 之action
un_Eliminated的博客
04-03 247
redux 之action 相信接触过redux 的人都会觉得在redux 三剑客中（reducer,action，store ）,action 是最简单的，所以作为第一次写博客的我很爽快的决定从他入手 格式 action 要求自身是一个平面对象（plain object）,所谓的平面对象，个人的理解就是他的原型必须是Object,prototype，不信你试试 把action 作为一个类，然后你...
在大型应用中使用 Redux 的五个技巧
大灰狼的小绵羊哥哥的博客
07-21 2590
http://www.tuicool.com/articles/u6VjIf3 Redux 是一个很棒的用于管理应用程序“状态”的工具。单向数据流以及对不可变数据的关注使得推断状态的变化变得很简单。每次状态变化都由一个 action 触发，这会导致 reducer 函数返回一个变更后的新状态。由于客户要在我们的平台上管理或发布广告资源，在 AppNexus 使用 Redux 创建的很多用
Concis组件库封装——Loading加载中
量子前端的博客
06-22 2078
一个常规的react loading组件的开发和测试
前端框架vue3中的条件渲染（v-show,v-if,v-else-if,v-else）
m0_73892800的博客
09-01 362
v-show,v-if,v-else-if,v-else
563、基于TP4056+DC/DC设计的5V、3A直流UPS电源设计（原理图、PCB图）
最新发布
09-01
563、基于TP4056+DC/DC设计的5V、3A直流UPS电源设计（原理图、PCB图） 该设计为基于TP4056+DC/DC设计的5V、3A直流UPS电源设计，实现5V、3A直流UPS供电设计； 功能实现如下： 1、一款5V 3A的直流UPS。 2、5V直流输入可选择TYPE-C或者5mm直流电源座。 3、5V直流输出可选择USB口或者焊线输出。 4、TP4056充电管理芯片； 5、DC/DC开关电源设计，实现5V、3A直流输出；
使用RxJS构建Redux Form实战指南
在使用RxJS实现Redux Form的过程中，我们需要关注以下几个关键点： 1. **表单状态管理**：首先，我们需要创建一个RxJS Subject或BehaviorSubject来存储表单的状态，包括各个字段的值、有效性状态（validity）以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值