首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么不在redux上添加层

在回答这个问题之前,我想先解释一下Redux是什么。

Redux是一个用于JavaScript应用程序的状态管理库。它被广泛应用于React应用程序中,用于管理应用程序的状态和数据流。Redux的核心概念包括store、action和reducer。

现在来回答为什么不在Redux上添加层的问题。

  1. 简洁性:Redux的设计目标之一是保持简洁性和可预测性。通过将应用程序的状态和数据流集中管理,Redux可以提供一种清晰且可预测的开发模式。如果在Redux上添加层,可能会增加代码复杂性,使得应用程序的状态管理变得混乱和难以维护。
  2. 性能:Redux已经经过优化,以提供高性能的状态管理。添加额外的层可能会导致性能下降,因为每个额外的层都需要进行额外的计算和处理。在大型应用程序中,性能是非常重要的因素,因此保持Redux的简洁性和高性能是很重要的。
  3. 开发效率:Redux已经成为React生态系统中的标准状态管理解决方案,并且有着广泛的社区支持和成熟的生态系统。在Redux上添加层可能会导致开发效率下降,因为开发人员需要学习和理解额外的概念和工具。此外,Redux已经提供了许多中间件和插件,可以满足大多数应用程序的需求,因此通常不需要添加额外的层。

总结起来,不在Redux上添加层的原因是为了保持代码简洁性、提高性能和开发效率。Redux已经提供了强大的状态管理功能,并且有着广泛的社区支持,因此通常不需要添加额外的层。如果有特定的需求,可以考虑使用Redux的中间件或插件来扩展其功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Redux从设计到源码

我们为什么要用ReduxRedux是什么? Redux是JavaScript状态容器,能提供可预测化的状态管理。 它认为: Web应用是一个状态机,视图与状态是一一对应的。...为什么要用Redux? 前端复杂性的根本原因是大量无规律的交互和异步操作。...如上图所示,如果我们的页面比较复杂,又没有用任何数据框架的话,就是图片这个样子:交互存在父子、子父、兄弟组件间通信,数据也存在跨、反向的数据流。...同时Redux中更新的逻辑也不在Store中执行而是放在Reducer中。...Q1:为什么要嵌套函数?为何不在函数中传递三个参数,而要在一函数中传递一个参数,一共传递三? 因为中间件是要多个首尾相连的,对next进行一的“加工”,所以next必须独立一

1.4K60

其实添加数据也可以这样简单——表单的第一步抽象(针对数据访问)《怪怪设计论: 抽象无处不在 》有感

按照由简到难的思路,这里先讨论最简单的添加数据的情况。就是单表的添加和修改;这里讨论的是webform的情况。 2、第一步抽象是针对数据访问的抽象。...7、怪怪设计论: 抽象无处不在 为了便于说明,先举个实际的例子吧。比如要实现一个发布信息(比如新闻)的功能,说白了就是添加数据。...只要你把数据放在数据库里(有表有字段的那种),而且这种数据库支持“insert into ”这样的标准SQL语句,那么就不需要修改数据访问也不用修改。...2、SQL语句完全放在数据访问里,只出现表名和字段名。 3、代码量少!数据访问只需要一个函数(还是公用的),也不用实体类来传递数据了,也就少了编写实体类和赋值取值的代码。...其他的地方,数据访问了根本就不用修改,根本就没有实体类,所以也就不用修改了。 5、添加、修改一个页面完成。 缺点: 1、虽然逻辑里没有出现SQL语句,但是依然出现了表名和字段名。

66180

在使用Redux前你需要知道关于React的8件事

通常人们会同时学习React和Redux,但这有一些缺点: 他们不会遇到在仅使用本地组件状态(this.state)时,扩展状态管理时出现的问题 因此他们没法理解为什么需要Redux这一类状态管理工具...高阶组件概念在后面会显得尤为重要,因为在使用像Redux这样的库的时候,你将会遇到很多高阶组件.当需要使用Redux这一类库将状态管理和React的视图层"连接"起来时.你通常会使用一个高阶组件来处理这关系...通常在使用复杂的状态管理工具库时,例如Redux和MobX,你需要将状态管理粘合到React的视图层.这也是为什么你需要了解React高阶组件的原因.这其中的粘合允许你访问State并进行修改,而...此外,还可以使用高阶组件来添加状态到React组件.你可以编写自己的高阶组件来管理状态,或者使用像recompose工具库中的withState高阶组件. import { withState } from...在深入Redux之前,理解这种模式背后的原理是很有意义的.当你使用状态管理的工具库时,你会把组件和State连接起来.那些组件并不在意应该怎么去展示内容,而更多是描述如何起效的.因此那些组件就是容器组件

1.2K80

对于“前端状态”相关问题,如何思考比较全面

就比如你问组长: 为什么项目中用Redux而不用Mobx? 为什么要用Hooks而不用ClassComponent? 很多时候得到的是一个既定的事实(就是这样,没有为什么),而不是分析后的结果。...当组件数量增多,逻辑变复杂时,一种常见的解耦方式是 —— 将可复用的逻辑从组件中抽离出来,放到单独的Model。UI直接调用Model的方法。 对Model的管理,也就是所谓的「状态管理」。...此时框架实现原理对Model的影响已经在更高的抽象中被抹去了,比如Redux-toolkit是React技术栈的解决方案,Vuex是Vue技术栈的解决方案,但他们在使用方式是类似的。...比如回答:为什么项目中用Redux而不用Mobx?...或者两种类型我都不在乎,那么要不要使用更高抽象的解决方案(比如MST、Redux Toolkit)抹平这些差异?

58730

一天完成react面试准备

为什么它们很重要refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。如果该属性的值是一个回调函数,它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。...这种机制可以让我们改变数据流,实现如异步 action ,action 过 滤,日志输出,异常报告等功能常见的中间件:redux-logger:提供日志输出;redux-thunk:处理异步操作;redux-promise...插入:组件 C 不在集合(A,B)中,需要插入删除:组件 D 在集合(A,B,D)中,但 D的节点已经更改,不能复用和更新,所以需要删除 旧的 D ,再创建新的。...) 添加唯一key进行区分,移动即可。...Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。

80871

Redux设计思想与使用场景

一、前言 Redux 作为 React 全家桶的一名重要成员,在众多大牛的力荐之下得到了广泛的应用,Github 的 Star 也达到 42k 之多!...然而,当触及最根本的问题,为什么要使用 Redux 的时候,很多人是说不清楚的。本文尝试解读 Redux 的设计初衷,并结合 React 谈谈实际的使用场景。...那么,为什么需要专门有一个工具来管理 state 呢?...View 与 Model 之间的关系错综复杂,如果想要添加一个功能或者修改 bug,都要花大量的时间进行调试,还容易出问题。...当然,另一个额外的好处是不再需要一的传递props了,因为Redux内置了一个发布订阅模块。 三、使用场景 Redux虽好,但并不适用于所有项目。

1.1K21

redux-saga_pub culture

但是,马上了解到了redux-sage,因为大家都在对比两者。本文并不会做对比,在文章的最后会简单介绍为什么选了Saga而不是thunk的原因,仅供参考。...在浏览了很多比较文章后,最终,我们选择了redux-saga来处理应用的控制。...好了,现在我们要把刚刚做的事情加到所有的表单。。。 (WTF, 每个form组件都要做同样的事情。。。页面的代码丑的不想再多看一眼。。。)...例如,Express 或者 Koa 的 middleware 可以完成添加 CORS headers、记录日志、内容压缩等工作。middleware 最优秀的特性就是可以被链式组合。...安装redux-sage npm install –save redux-saga 给redux添加中间件 在定义生成store的地方,引入并加入redux-sage中间件。

1.4K10

Redux 设计理念到源码分析

毕竟,成功总是需要站在巨人的肩膀不是。 话说回来,都 2020 年了还在写 Redux 的文章,真的是有些过时了。...而 「Redux 就是我们 Web 应用的一个状态管理方案」。 ? 一一对应 如上图所示,store 就是 Redux 提供的一个状态容器。里面存储着 View 所需要的所有的状态(state)。...为什么要使用 Redux 如上所说,我们现在是状态驱动 UI,那么为什么需要 Redux 来管理状态呢?react 本身就是 state drive view 不是。...任何 state 的变更,都可以理解为非 View 引起的(网络请求、用户点击等)。View 只是发出了某一种意图。而如何去满足,完全取决于 Redux 本身,也就是 reducer。...actions.ts 类型声明也没有太多的需要去说的逻辑,所以我就写注释吧 // Action的接口定义。

92830

前端经典react面试题及答案_2023-02-28

为什么 React 元素有一个 $$typeof 属性 图片 目的是为了防止 XSS 攻击。...expectedTextButGotJSON }; // React 0.13 中有风险 {message.text} connect原理 首先connect之所以会成功,是因为Provider组件: 在原应用组件包裹一...,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件的connect connect做了些什么。...它真正连接 Redux 和 React,它包在我们的容器组件的外一,它接收上面 Provider 提供的 store 里面的state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件...或 父级中; 在组件内部维护一个状态量 (isUnmounted),componentWillUnmount中标记为 true,在setState前进行判断; Redux实现原理解析 为什么要用redux

1.5K40

使用 Redux 之前要在 React 里学的 8 件事

通常大家会同时学习 React 和 Redux,但这会产生一些问题: 在仅使用本地状态(this.state)的场景下,大家从不会遇到跨页面状态管理的问题 因此不会理解为什么需要一个像 Redux 这样的状态管理库...也因此大家会抱怨 Redux添加过多的模板 不会在 React 里学习管理本地状态 因此大家会管理(以及搞乱) Redux 状态容器里的所有状态 所以不会使用本地状态管理 因为这些问题,你通常会被建议先学习...通常,当使用一个复杂状态管理库的时候,比如 Redux 和 MobX,你在某个地方把状态管理连接到 React 视图层,这就是为什么你在 React 中提及高阶组件。...在更深入 Redux 以前,理解这种模式背后的原理很有必要。使用状态管理库的时候,你会把组件“连接”到状态。这些组件不关心外观形态,但更关心如何工作,因此这些组件是容器组件。...更具体的说,你会经常听到术语 connected componenets 当某个组件已经连接上状态管理的时候。 MobX 还是 Redux

1.1K20

45. 精读《Reacts new Context API》

2 概述 像 react-redux、mobx-react、react-router 都使用了旧 Context api,可谓 context 无处不在。...最后是 rxjs,其主打能力压根不在 react,核心竞争力在数据处理能力,与数据源的抽象,做到了副作用隔离在数据处理流程之外。 可见技术框架也是如此,核心竞争力在哪,未来就在哪。...我们之前说过,除了数据流框架,像 react-router,或者一些国际化组件也会使用到 context 传递数据,本质是需要 context 解决对数据透传的控制能力。...举个例子,国际化参数可以让组件一透传,但调用到 node_modules 组件时,我们无法修改其 dom 结构,怎么让这个参数强制透传呢?...数据流框架也无法被取代,因为数据流框架的核心竞争力不在数据的依赖注入,而是对数据的处理。

46030

react相关面试知识点总结

为什么它很重要?组件状态数据或者属性数据发生更新的时候,组件会进入存在期,视图会渲染更新。...redux有action、reducer的概念,action为唯一修改state的来源,reducer为唯一确定state如何变化的入口,这使得redux的数据流非常规范,同时也暴露出了redux代码的复杂...,直到没有子节点connect原理首先connect之所以会成功,是因为Provider组件:在原应用组件包裹一,使原来整个应用成为Provider的子组件 接收Redux的store作为props...它真正连接 Redux 和 React,它包在我们的容器组件的外一,它接收上面 Provider 提供的 store 里面的state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件...如果我们的数据请求在组件挂载之前就完成,并且调用了setState函数将数据添加到组件状态中,对于未挂载的组件则会报错。

1.1K50

React全家桶与前端单元测试艺术|洞见

单元测试的好坏在于“单元”而不在“测试”。如果一个系统毫无单元可言,那就没法进行单元测试,几乎只能用Selenium做大量的E2E测试,其成本和稳定性可想而知。...有点像Event Sourcing,以消息而非调用来处理逻辑,更新和订阅的逻辑不在一起(事件是写模型,各种view就是多个读模型)。 reducer几乎包括了我们所有前端业务的核心,测好它就测了大半。...多加这Paragraph是为了展示renderJSX只向下渲染了一,而非最终需要渲染的p标签。这样我们在View的测试粒度就会变得更小,成本更低,速度更快。...可以试着把fetch覆盖成空函数,你可以发现实际副作用根本没发生,“fetch到底是个啥”对测试一点影响都没有。...尽量抽出Model,不要把逻辑写在VM里,看那样似省事,行数在测试里都还回来了。

1.1K72

React、Flux以及Redux小结

你只需要使用一点点代码就能立即使用它) Flux结构组成 View 视图层 Action 动作 比如视图层发出的消息(比如mouseClick) Dispatcher 派发器 接受Actions,执行回调函数 Store 数据...---- React React是一个View框架,用来渲染视图,不直接操作View,想要操作view只能通过修改state来实现 state的改变主要来自两个方面,一个是服务端,另一个是用户行为,其中用户行为占很大一部分...当Store发生变化的时候,通常根组件(也可以不是根组件)会去获取新的store,然后更新state,然后利用React的单项数据流的特点一的向下传递state以更新view。...2.Flux有多个store;在store中完成新的state的推导;每一个store都只对对应的view,每次更新都只通知对应的view Redux只有一个store;Redux的更新逻辑也不在store...= "添加 TODO"; function addToDo(text) { return { type: ADD_TODO, text } } const

62410
领券