Redux的设计问题:当您想要执行Redux操作来分派其他Redux操作时，您应该这样做吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

你必须知道的react redux 陷阱

react redux介绍 React Redux 是 Redux 的官方 React UI 绑定层。它允许您的 React 组件从 Redux 存储中读取数据，并将操作分派到存储以更新状态。...接下来我，详细说一下，他们发生的条件：陈旧props触发条件：选择器函数依赖于该组件的 props 来提取数据作为一个动作的结果，父组件会重新渲染并传递新的道具但是这个组件的选择器函数在这个组件有机会用这些新道具重新渲染之前执行...不了解基础概念的，看一看官方链接： Basic Selector Concepts 其中前两个操作是我们经常使用，最后一个在没有渲染之前重新执行，恐怕只有回调事件（网络访问，异步事件回调等）才会满足。...当它根据 props 从 store 中读取一个值时，该数据不再存在，如果提取逻辑不小心，这可能会导致抛出错误。嗯，其实我觉得这是一个使用方式的问题，这种bug可以说是设计之初就决定不能这样使用的。...想要更改，代价颇大，不如开个会说明白就好了。

2.5K3 0

设计师都能懂的 Redux 指南

让我们深入研究 Redux 可以做什么，它为什么做它的事情，它的缺点是什么，以及它与设计有哪些关联？你听说过 Redux 吗?它是什么?...以及它与设计有哪些关联？我的目标是帮助像你们这样的设计师。即使您以前没有写过一行代码，我认为理解 Redux仍然是可能的、有益的和有趣的。...这是一个有点复杂的工具，学习曲线相对陡峭，但这是否意味着我们作为设计师应该远离它？不。我认为我们应该拥抱它。汽车设计师应该了解引擎的用途，对吗?...它能够为你完成大量繁重的工作。。 Redux 可以非常轻松地通过网络发送正在发生的事情。接收另一个用户在另一台机器上执行的操作，重放更改并与本地发生的操作合并是很简单的。...在大多数情况下，这不是什么大问题，而且放缓并不明显。仍然，当存储中存在大量数据并且当数据频繁改变时（例如，当用户在移动设备上快速键入时），UI 可能因此变得缓慢。

1.7K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

从设计的角度看 Redux

你知道 Redux 真正的作用远不止状态管理吗？你是否想要了解 Redux 的工作原理？让我们深入研究 Redux 可以做什么，它为什么做它的事情，它的缺点是什么，以及它与设计有哪些关联？...以及它与设计有哪些关联？我的目标是帮助像你们这样的设计师。即使您以前没有写过一行代码，我认为理解 Redux仍然是可能的、有益的和有趣的。...我认为我们应该拥抱它。汽车设计师应该了解引擎的用途，对吗?为了成功地设计应用程序界面，设计师还应该对底层的东西有扎实的了解。我们应该了解它可以做什么，理解开发人员为什么使用它，并了解它的优势和含义。...它能够为你完成大量繁重的工作。。 ? Redux 可以非常轻松地通过网络发送正在发生的事情。接收另一个用户在另一台机器上执行的操作，重放更改并与本地发生的操作合并是很简单的。...在大多数情况下，这不是什么大问题，而且放缓并不明显。仍然，当存储中存在大量数据并且当数据频繁改变时（例如，当用户在移动设备上快速键入时），UI 可能因此变得缓慢。

1.7K3 0

Redux Toolkit

它最初的创建是为了帮助解决关于 Redux 的三个常见问题： “配置 Redux 存储太复杂了” “我必须添加很多包才能让 Redux 做任何有用的事情” “Redux 需要太多样板代码” 我们无法解决所有用例...Redux Toolkit 还包括一个强大的数据获取和缓存功能，我们称之为“RTK Query”。它作为一组单独的入口点包含在包中。它是可选的，但可以消除您自己手写数据获取逻辑的需要。...这些工具应该对所有 Redux 用户都有益。...无论您是设置第一个项目的全新 Redux 用户，还是想要简化现有应用程序的经验丰富的用户，Redux Toolkit都可以帮助您改进您的 Redux 代码。...安装使用 React 和 Redux 启动新应用程序的推荐方法是使用官方 Redux+JS 模板或Redux+TS 模板来创建 React App，它利用了Redux Toolkit和 React Redux

1301 0

【领域驱动设计】Redux 和领域驱动设计

本书快速介绍了所有概念，并全面介绍了如何开始做 DDD。 Redux Redux 与领域驱动设计有着惊人的关联。虽然它不共享相同的术语，但想法是存在的。...推理很简单：您可以通过重放其事件来重建任何聚合的状态。例如，您可以通过重播 PostAdded 事件来重建所有帖子。你熟悉 Redux 中的这个概念吗？几乎可以肯定，是的。...没问题，重播事件，就可以重建状态。由于错误导致数据损坏？解决错误、重播事件并获得原始状态。你在帮助其他用户吗？只需重播他们的事件即可知道他们的状态。第二个是CQRS。...正是这种精确的特性阻止了有害的大泥球的产生。让我们看一个例子：我们有一家销售产品并使用营销活动来提供报价的公司。商店中的现有商品最初标有相应的产品售价，但当活动开始时，它会用广告价格重新标记商品。...我们减少了应用程序的耦合，我们可以在不更改任何代码的情况下从系统中插入和拔出单元。 Redux 做同样的解耦。每个组合的减速器就像一个聚合体。当 reducer 收到一个动作时，它会独立地减少它。

1.5K3 0

手摸手教你基于Hooks 的 Redux 实战姿势

原文：Redux Crash Course with Hooks ?[1] 作者：Chris Achard 译者：博轩为保证文章的可读性，本文采用意译 ? 你对 Redux 感到困惑吗？...使用 react-redux 中的 Provider 来为你的应用提供 store。使用 Provider 来包装你的应用入口，以便应用程序中的任何组件都可以访问 store 中的数据 ? 4....5. action 是普通的 JavaScript 对象所有 action 均应具有 “type” 键它们可能还具有其他键（参数） ? 6....重要的是，reducer 返回一个新的状态对象（而不是修改旧的对象的属性），这样，当对象中的属性发生某些改变时，组件将重新渲染。...要分派 action ，请使用 react-redux 中的自定义 hook： useDispatch 用一个 action 对象来调用 useDispatch，将传入 reducers 函数并运行，

1.5K2 0

RxJS & React-Observables 硬核入门指南

当您执行.addeventlistener时，你正在将一个观察者推入subject的观察者集合中。无论何时事件发生，subject都会通知所有观察者。...Observable 当Observable被订阅时，我们传递给新Observable构造函数的subscribe函数就会被执行。...当一个观察者订阅了一个可观察对象，它会得到一个有自己执行路径的可观察对象的副本，使可观察对象成为单播的。这就像在看YouTube视频。所有的观众观看相同的视频内容，但他们可以观看视频的不同部分。...所有这些都让Redux看起来有点过头了。但是这里有一些实际的用例可以改变您的想法。...但我不讨厌redux- tank，我喜欢它，我每天都在使用它! 练习1：调用API 用例:调用API来获取文章的注释。当API调用正在进行时显示加载器，并处理API错误。

6.9K5 0

2023 React 生态系统，以及我的一些吐槽……

Redux 文档教授了一些常见的模式，用于在请求生命周期中分派操作以跟踪加载状态和请求结果，并且 Redux Toolkit 的 createAsyncThunk API 是设计为抽象化该典型模式的。...虽然可以使用像 Redux 这样的状态管理库来缓存数据，但这些用例足够不同，值得使用专为数据获取用例而构建的工具。...RTK Query 从先驱解决数据获取问题的其他工具（如 Apollo Client、React Query、Urql 和 SWR）中获得灵感，但在其 API 设计中增加了独特的方法：数据获取和缓存逻辑是构建在...核心的 @apollo/client 库提供了与 React 的内置集成，而更大的 Apollo 社区则维护了与其他流行的视图层的集成。应该是用 GraphQL 时的状态管理最佳选择。...对于小型应用程序来说这没问题，但如果您使用 Redux-Form，随着 Redux 应用程序的增长，输入延迟将继续增加。

7853 0

React 入门学习（十四）-- redux 基本使用

简单理解就是复杂从组件角度去考虑的话，当我们有以下的应用场景时，我们可以尝试采用 Redux 来实现某个组件的状态需要共享时一个组件需要改变其他组件的状态时一个组件需要改变全局的状态时除此之外...Redux 三个核心概念 1. store store 是 Redux 的核心，可以理解为是 Redux 的数据中台，我们可以将任何我们想要存放的数据放在 store 中，在我们需要使用这些数据时，我们可以从中取出相应的数据...但是如果仅仅这样，很显然是会报错的，它默认需要接收一个对象如果我们需要实现传入函数，那我们就需要告诉：你只需要默默的帮我执行以下这个函数就好！...—> reducer —> store 第二个原则 state 只读：在 Redux 中不能通过直接改变 state ，来控制状态的改变，如果想要改变 state ，则需要触发一次 action。...参考资料 Redux + React-router 的入门和配置‍教程小册：React 进阶实践指南 ---- 非常感谢您的阅读，欢迎提出你的意见，有什么问题欢迎指出，谢谢！

4792 0

「前端架构」Grab的前端学习指南

最后，您的视图和逻辑在组件中是自包含的，不应该受到影响，也不应该影响其他组件。这使得在大规模重构过程中很容易对组件进行移位，只要向组件提供相同的支持即可。...编写好的CSS是困难的。在能够编写可维护和可伸缩的CSS之前，需要多年的经验和挫败感来解决问题。具有全局名称空间的CSS基本上是为web文档设计的，而不是真正为偏爱组件体系结构的web应用程序设计的。...linter是一个静态分析代码并发现代码问题的工具，它可以潜在地防止bug /运行时错误，同时强制执行一种编码风格。在拉请求审查期间，当审查人员不必对编码风格留下挑剔的评论时，可以节省时间。...当您有多个项目时，这些包在每个项目中都是重复的，它们在很大程度上是相似的。每次在新项目中运行npm安装时，这些包都会被一次又一次地下载，即使它们已经存在于计算机中的其他项目中。...npm@5.0.0于2017年5月发布，它似乎解决了纱线想要解决的许多问题。一定要注意! 预计持续时间:2小时。

7.5K2 0

浅谈前端的状态管理（下）

来改变（既你借书只能提交借书单来借），不应该直接修改 State 里的值。...（既通过提交借书单给管理员才会有接下来一系列的其他操作） Action 是一个自定义对象，其中type属性是约定好将要执行的操作。...尽管在 Redux 里还是没办法做到一切都是确定的（如异步）但是应该保证大多数部分都是确定的包括：视图的渲染是可确定的状态的重建是可确定的至于为什么要这么做，上一篇我已有提及。...（当然你想用 Redux 也没问题，咱们只是探索更多方式）还是用图书馆来举例子，现在有一个图书馆管理系统，你从列表页（list）跳入详情页（detail）需要保存列表页的状态（如搜索栏的状态等）。...若使 HOC（高阶组件）继承自原组件，就不会生产两个生命周期交替执行，很好的解决这个问题。

8992 0

2021年50个酷炫的Web和移动项目创意

2021年50个酷炫的Web和移动项目创意当想到项目创意时，很多人都在挣扎。这里列出了50个您可以在2021年完成的很棒的项目构想。我将以下列的技术栈为例，以便您弄清楚自己也可以做到这一点。...这样，您就可以在一个平台上拥有一个统一的界面来读取所有内容。...即使您当前拥有或出售了它，也不管它是数字版本还是实物副本。如果您可以将这样的应用程序扩展到更多的社交网络中，以便您可以关注其他人的游戏列表，然后他们也可以这样做，则可以进一步扩展。可能性是无止境。...像体重，身高等… 编程级别：中级项目类型：全栈前端：HTML，CSS，JavaScript，React，Redux，React本机后端：Node.Js，NoSQL 36.居室装饰应用曾经努力想出一个想要房间看起来如何的想法吗...例如，假设您有一个选择选项，而您需要选择正确的选项。您应该能够跟踪得分，并且得分应该始终是随机的，这样就不会有一场比赛是一样的。

4.3K2 1

2022社招react面试题附答案

React的异步请求到底应该放在哪个⽣命周期⾥，有⼈认为在componentWillMount中可以提前进⾏异步请求，避免⽩屏，其实这个观点是有问题的。...由于JavaScript中异步事件的性质，当您启动API调⽤时，浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时，它不会等待componentWillMount它完成任何事情。...总结： componentWillMount：在渲染之前执行，用于根组件中的 App 级配置； componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM的操作或状态更新以及设置事件监听器...这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式。 7、如何避免组件的重新渲染？ React中最常见的问题之一是组件不必要地重新渲染。...redux-observable优点：功能最强：由于背靠rxjs这个强⼤的响应式编程的库，借助rxjs的操作符，你可以⼏乎做任何你能想到的异步处理；背靠rxjs：由于有rxjs的加持，如果你已经学习了

2.1K1 0

react-redux

一、什么是react-redux React-Redux是Redux的官方React绑定。它允许您的React组件从Redux存储中读取数据，并将操作分派给存储以更新数据。...它由二个重要的部分组成，一个是组件，另一个是connect()是react-redux提供的一个柯里化的函数, 用于连接redux 二、学习网址 https://react-redux.js.org...'react-redux' Provider 的引入 import { connect } from 'react-redux' connect的引入四、关于Provider Provider是react-redux...提供的一个组件，把这个组件包在最外层，这个组件接收一个参数，就是store， store是通过redux提供的createStore方法创建的。...可以不这样用 const mapDispatchToProps = (dispatch) => { return { reduceCount: () => { dispatch(

9891 0

React进阶(1)-理解Redux

,很痛苦时,那么就可以考虑使用Redux了的,只要你hold住,没有所谓的高大上技术,只有适合自己业务的技术盲目引入Redux只会增加项目的复杂度,引入新的技术应该是循序渐进的不使用Redux...,凡是共用了Store里面的数据的组件都会重新的取数据这样一来,红色圆圈组件的数据就非常容易的传递给其他组件了,无论是它的父级组件还是兄弟,非兄弟组件的 Redux就是把组件的数据放到一个公共的区域...(仓库)中进行存储,当改变Store存储区域里面的数据时,其他组件如果用到了公共区域的数据,那么就会感知到数据的变化,它会自动的更新取Store中最新的数据这样话,无论你的应用组件嵌套得有多么复杂,...多么深,走的流程都是一样的,组件之间并不会干扰,低耦合的效果当组件一修改,把修改的数据放到Store当中,而其他组件又从Store当中再来取,这样的话,组件与组件之间并不是直接进行通信的,是通过这么一个...,返回给页面上的组件,实现页面组件的更新大家可以先仔细体会上面这段文字的含义,在后续的实例代码中,在回过头来对比着代码与文字进行理解的,后续还会在拿出来的 Redux的设计基本原则在Redux中有以下几个设计基本原则

1.5K2 2

前端高频react面试题

来担任，store只做存储，中间人，当Reducers的更新完成以后会通过store的订阅来通知react component，组件把新的状态重新获取渲染，组件中也能主动发送action，创建action...一些库如 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是，React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。...一般认为，做异步设计是为了性能优化、减少渲染次数：setState设计为异步，可以显著的提升性能。...这个问题就设计到了数据持久化，主要的实现方式有以下几种：Redux：将页面的数据存储在redux中，在重新加载页面时，获取Redux中的数据；data.js：使用webpack构建的项目，可以建一个文件...时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

3.4K2 0

高频React面试题及详解

由于JavaScript中异步事件的性质，当您启动API调用时，浏览器会在此期间返回执行其他工作。...而且在componentWillMount请求会有一系列潜在的问题,首先,在服务器渲染时,如果在 componentWillMount 里获取数据，fetch data会执行两次，一次在服务端一次在客户端...来解决这个问题 Ref 传递问题: Ref 被隔断,后来的React.forwardRef 来解决这个问题 Wrapper Hell: HOC可能出现多层包裹组件的情况,多层抽象同样增加了复杂度和理解成本...React 16之前，reconcilation 算法实际上是递归，想要中断递归是很困难的，React 16 开始使用了循环来代替之前的递归....,但是我们依然需要引入这些代码 ts支持不友好: yield无法返回TS类型 redux-observable优点: 功能最强: 由于背靠rxjs这个强大的响应式编程的库,借助rxjs的操作符,你可以几乎做任何你能想到的异步处理

2.4K4 0

React进阶(1)-理解Redux

,由于组件都是以树结构组织起来的,当每个组件被渲染时,它都会递归地渲染下级组件 ?...,是放到reducer里面去管理,Store从Reducer中拿到返回的数据state,最后供外部组件的取用当红色圆圈组件想要改变数据传递给其他组件时,只需要去改变Store里面的存储红色圆圈组件的数据就可以了...这样一来,红色圆圈组件的数据就非常容易的传递给其他组件了,无论是它的父级组件还是兄弟,非兄弟组件的 Redux就是把组件的数据放到一个公共的区域(仓库)中进行存储,当改变Store存储区域里面的数据时,...当组件一修改,把修改的数据放到Store当中,而其他组件又从Store当中再来取,这样的话,组件与组件之间并不是直接进行通信的,是通过这么一个store中间角色来实现数据的传递共享的....在Redux中有以下几个设计基本原则单向数据流唯一数据源保持状态只读数据的改变只能通过纯函数reducer来完成单向数据流: 这个其实与props不能直接被修改一样,在父组件向子组件传递数据时是通过属性的方式进行传递的

1.2K2 0

React全家桶之Redux使用

也正因为一切皆有可能，一个问题即使没有无数种解法，也会有很多很多种解法。但是，拥有很多方案并不表示我们应该使用所有的方案。软件要由程序员来维护和开发，研发部门管理也是程序员。...React和Redux技术框架最大的好处，并不是让我们无所不能，而是设定了一规矩，让每个模块只做最单一的事情。让开发者只能按照这套规矩来完成代码。...这样，只要理解了这套规矩，无论产生的代码由谁来维护由谁来继续开发都不会有大问题。 redux其实借鉴与flux的思想,它是单向数据流的最佳实践（也许吧）。...重构当前代码很不友好，应该重构一下。重点思考，connect的两个参数是什么含义？在组件中dispatch操作（add，init）会造成很大的耦合。如果能结构到组件的参数中，就好了。...但经过中间件（强化器）处理后，可以做异步操作，或者打日志安装redux-thunk和redux-logger: npm i redux-thunk redux-logger-S 应用中间件，store.js

1.3K2 0

探索 React 状态管理：从简单到复杂的解决方案

虽然像Redux这样的库是管理应用程序状态的流行选择，但你应该明白何时使用它们，何时不使用它们，而且在满足需求时考虑像Context API这样的简单替代方案也很重要。...然后，我们定义了一个减速器函数，根据分派的动作处理状态更新。我们使用Redux的createStore函数创建一个Redux store，并将减速器传递给它。...当单击增量或减量按钮时，我们使用dispatch函数分派相应的动作。利用React Query进行服务器状态管理对于涉及服务器端状态管理（如数据获取和缓存）的情景，我们引入React Query。...像Context API这样的简单解决方案通常足以满足较小项目的要求，并避免不必要的复杂性。通过理解不同状态管理方法的优势和权衡，您可以在选择正确解决方案时做出明智的决策。...记住，当更简单的替代方案可以有效满足您的需求时，并不总是必要引入庞大的框架。拥抱React状态管理生态系统的灵活性，并选择最符合项目大小和复杂性的方法。

4833 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭