开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我应该在何时何地为Redux store中的规范化数据使用"fetchingData“状态？

在Redux store中的规范化数据使用"fetchingData"状态，是指在数据从服务器获取的过程中，可以使用"fetchingData"状态来表示正在获取数据的状态。这个状态可以用来更新UI，例如显示加载中的动画或者禁用某些按钮，以提高用户体验。

通常情况下，在进行网络请求之前，我们可以将Redux store中与该数据相关的状态设置为"fetchingData"，然后发送网络请求获取数据。当数据请求完成后，我们可以根据请求结果来更新Redux store中的状态，例如将数据存储在相应的reducer中，并将与数据请求相关的状态更新为"success"或"failure"。

使用"fetchingData"状态有以下几个优点：

提高用户体验：在数据请求过程中，显示加载中的动画或禁用相关按钮，可以让用户知道正在进行数据加载，避免用户的操作引起数据不一致或者错误。
方便错误处理：当数据请求失败时，可以将相关状态更新为"failure"，并显示错误信息，方便开发人员进行错误处理或者提示用户重新尝试。
统一管理状态：通过使用"fetchingData"状态，可以将与数据请求相关的状态进行统一管理，便于开发人员跟踪数据请求状态，方便代码维护和排查问题。

使用"fetchingData"状态的应用场景包括但不限于：

在用户进行登录或注册操作时，可以使用"fetchingData"状态来表示正在进行用户认证请求。
在展示列表数据时，可以使用"fetchingData"状态来表示正在获取列表数据。
在进行表单提交操作时，可以使用"fetchingData"状态来表示正在提交表单数据。

对于腾讯云相关产品的推荐，可以考虑使用腾讯云提供的云函数 SCF（Serverless Cloud Function）来处理数据请求，通过腾讯云 SCF 可以方便地处理数据请求，并且具有高可扩展性和弹性伸缩能力。具体产品介绍和链接地址如下：

腾讯云云函数 SCF：

产品介绍：腾讯云云函数（Serverless Cloud Function，SCF）是一个事件驱动的无服务器计算服务，无需管理服务器即可运行您的代码。
产品链接：https://cloud.tencent.com/product/scf

相关搜索:为什么在我的Redux Store中创建了多个嵌套状态使用Redux中的异步数据初始化状态我应该在typeScript中为我的json数据定义类型吗？当用户再次选择页面时，我想在redux saga store中显示保存的数据我应该在哪里计算react-redux应用程序中的派生数据？是否可以让`App`组件在构造函数中有自己的状态，同时在redux中从` store`中获取数据？在react-redux中调度操作后使用null更新我的状态使用Lodash在Redux/React中的状态中添加和删除数据我应该如何使用React/redux在我的渲染方法中传递数据我应该在flutter中为我的自定义小部件使用通用前缀吗？Redux状态显示使用axios插入到stateStore中的未定义数据我应该在C++中为成员变量和函数参数使用相同的名称如果我为我的react应用程序使用数据库，那么redux有什么用？组件在从状态中删除对象后没有重新加载，我使用的是React-redux 无法使用react中的挂钩在我的本地状态中设置响应数据我是否应该在一个页面/屏幕中使用多个区块来加载颤动中的不同状态？使用本地存储保持状态并不是为react类组件中的视图类型保存状态数据使用RxAndroid，从网络接收数据后，我应该在哪里(以哪种方法)调用DB中的数据插入部分？我应该为这个UDF使用什么对象，它应该在一组数据中查找基于列标题的值？对于数据帧中的NaN，我应该在excel中传递值0.00(百分比格式)，而不是0。使用熊猫

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Redux原理分析以及使用详解（TS && JS)

某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中，数据在组件中是单向流动的，这是react...而不是直接通知其他组件，组件内部通过订阅 store 中的状态 state 来刷新自己的视图 1.4、Redux是什么？...很多人认为redux必须要结合React使用，其实并不是的，Redux 是 JavaScript 状态容器，只要你的项目中使用到了状态，并且状态十分复杂，那么你就可以使用Redux管理你的项目状态，它可以使用在...三大原则 1、唯一数据源 2、保持只读状态 3、数据改变只能通过纯函数来执行 1、唯一数据源整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中 2、保持只读状态...对于这个问题，在我这份代码里面，目前我想到了三个解决方法： 1、定义初始值loading为true，当我们dispatch成功把数据存入的时候，才将loading改为false，写一个加载动画，用这个loading

4.3K3 0

谈谈 React 5种最流行的状态管理库

无论何时何地，使用 start 命令启动你的命令。...Mobx MobX React Lite Docs[7] 代码行数: 30 因为我在使用 Redux 之后使用了MobX React，所以它一直是我最喜欢的管理 React 状态库之一。...MobX 实践开始使用Mobx前，先安装依赖： npm install mobx mobx-react-lite 该应用的状态已在 Store 中创建和管理。...XState 在这里的使用不是特别好，因为它更适合在更复杂的状态下使用，但是这个简短的介绍至少可以希望为你提供一个选择，以帮助你全面了解其工作原理。...它的API可能不如其他一些库那么好，但是如果你了解如何使用它，并且可以在你的 app 中使用它创建正确的数据抽象，那么选择 context 来管理你的全局状态就不会错。

2.7K2 0

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

和大多数状态管理方案一样，Redux 的思想也是发布订阅模式，我们还是以图书馆为例来简单了解一下 Redux。...Redux 的基础操作大致为： Store（图书馆管理员） State（书本） Action（借书单） store.dispatch(提交借书单) Reducer（包装书本） store.subscribe...尽管在 Redux 里还是没办法做到一切都是确定的（如异步）但是应该保证大多数部分都是确定的包括：视图的渲染是可确定的状态的重建是可确定的至于为什么要这么做，上一篇我已有提及。...他的重要之处在于：便于应用的测试，错误诊断和 Bug 修复。状态管理的目的那其实大多数程序员使用 Redux 的最多的场景无非是从 A 页面返回 B 页面需要保存 B 页面的状态。...社区中的方案普遍是改造路由，但是这种改造对于项目入侵过大且不易维护，另外在 react-router v5 中也取消了路由钩子。于是，对小型项目来说自己封装一个函数也不失为良策。

8942 0

在 redux 应用中使用 GraphQL

正如 Sashko Stubailo 指出的：不幸的是，在 Redux 应用程序中异步加载服务器数据的模式还没有建立起来，并且经常需要使用外部帮助程序库，如 redux-saga。...您需要编写自定义代码来调用服务器接口，解释数据，对其进行规范化并将其插入到存储中 - 同时跟踪各种错误和加载状态。在本教程中，您将学习如何通过 Apollo Client 来获取和管理数据。...快速的启动一个服务端环境启动一个 redux 脚手架增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据获取更多的数据接下来要做的 1....客户端正在运行，现在是开始添加 GraphQL 客户端的时候了。我们的目标是使用 GraphQL 查询，从服务器轻松获取数据并将其呈现在着陆页（HomeView）中。 3....在这里我们把 redux store 通过 react-redux 中的 provider 传递给子组件。

1.9K1 0

Redux Toolkit：简化Redux应用状态管理

Redux Toolkit 是官方推荐用来简化Redux开发的工具集。它包含了一些预设的最佳实践，使得创建和管理Redux状态变得更简单。1....创建Store使用configureStore函数来创建Redux store，它会自动配置中间件，如redux-thunk用于处理异步操作。...Dispatching Actions在React组件中，你可以使用useDispatch和useSelector这两个react-redux的hook来派发action和获取状态。...时，Redux Toolkit会自动将它添加到store的reducer对象中，无需手动合并。...，你可以考虑规范化状态形状，这有助于减少冗余和提高查询性能。

761 0

Redux Toolkit

它最初的创建是为了帮助解决关于 Redux 的三个常见问题： “配置 Redux 存储太复杂了” “我必须添加很多包才能让 Redux 做任何有用的事情” “Redux 需要太多样板代码” 我们无法解决所有用例...Redux Toolkit 还包括一个强大的数据获取和缓存功能，我们称之为“RTK Query”。它作为一组单独的入口点包含在包中。它是可选的，但可以消除您自己手写数据获取逻辑的需要。.../features/counter/counterSlice'; // configureStore创建了一个redux数据 export const store = configureStore({...此外，它自动使用该immer库让您使用普通的可变代码编写更简单的不可变更新，例如state.todos[3].completed = true. createAction()：为给定的动作类型字符串生成动作创建函数...reducer 和 selector 来管理 store 中的规范化数据重新选择库中的createSelector实用程序，重新导出以方便使用。

1241 0

企业级 React 项目的高级测试设置

在任何复杂应用中，测试是一个至关重要的方面。测试不仅仅是为了提高覆盖率，其主要目的是尽可能地模拟实际使用场景。最近，我需要为一个庞大的ReactJS项目建立测试架构。让我展示给你我是如何做的。...虽然它还不完整，但我想与你分享我的进展。为什么这么做？该项目已经在使用Enzyme进行测试。...如果组件依赖于redux状态，那么除非连接到redux状态，否则无法测试所有行为。那么我们该怎么办呢？首先，我们需要创建一个可重用的函数来渲染组件。这有点类似于ReactJS中的渲染属性模式。...它将接受一个store和一个初始状态作为参数。这些是你想要使用redux存储来测试组件的值。...我们将使用react-router-dom的Router来为第二个URL路径挂载一个虚拟组件，并确保它显示在画面中。

980 0

React：Redux怎么处理异步？

Redux是个状态管理容器，核心接口就这几个： createStore(reducer, preloadedState, enhancer); store.subscribe(listener);...)来触发状态变化： store.dispatch(action); // 分发Action dispatch(action)则通过reducer完成状态修改： currentState = currentReducer...至此，我们可以看出 Reducer 必须是同步函数不能放置异步逻辑（注：Redux要求Reducer必须是“纯函数”!） ---- 那么，问题来了... Redux应该在哪处理异步逻辑？ ?...异步逻辑应放置在 Redux中间件中处理 !! Middleware !! （就是下面要提到的redux-thunk、redux-promise） ?...INC_INPROGRESS 动作不太好安置，不利于我们实现 loading 状态； b. 业务逻辑实质还是集中在 action 中处理，变更了 action 原本的含义； ?

2.7K3 0

Redux

三大原则单一数据源整个应用的state被储存在一棵object tree中，并且这个object tree只存在于唯一一个store中。...Redux应用只有一个单一的store。当需要拆分数据逻辑时，应该使用reducer组合而不是创建多个store。数据流严格的单向数据流是Redux结构的核心设计。 ...这意味着应用中所有的数据都遵循相同的声明周期，这样可以让应用变得更加可预测且同意理解。同时也鼓励做数据规范化，这样可以避免使用多个独立且无法相互引用的重复数据。 ...Redux应用中数据的声明周期遵循4个步骤： 1、调用store.dispatch(action)。 2、Redux store调用传入的reducer函数。...展示组件容器组件作用描述如何展现（骨架、样式）描述如何运行（数据获取、状态更新）直接使用Redux 否是数据来源 props 监听Redux state 数据修改从props调用回调函数

1.8K2 0

Redux（一）：基本概念

随着单页面应用的日益复杂，JavaScript需要维护更多的状态，这些状态除了包含服务端返回的数据还有：缓冲数据、未同步到服务端的持久化数据、UI状态等。...如果能将这些状态从单个组件剥离出来统一管理，将会更好的维护、拓展Web应用。 Redux就是JavaScript应用这样一个可预测化的状态管理容器。...三大原则一、单一数据源应用的state保存在一个JavaScript对象树中，并且这个对象树只能存在于唯一的一个store中。...3、创建一个store 在redux中应该只有一个store，单一数据源，这一点很重要。redux向外暴露了一个createStore方法用来创建store。...input框用来输入待办事项，点击提交按钮将数据加到todos中，初始状态completed为false，点击完成将对应的这一条改为true。

1.3K1 0

Redux 快速上手指南

Redux简介如果要用一句话来概括Redux，那么可以使用官网的这句话：**Redux是针对JavaScript应用的可预测状态容器。...任何UI组件都可以直接从store访问特定对象的状态。在Redux中，所有的数据（比如state）被保存在一个被称为store的容器中，在一个应用程序中只能有一个store对象。...这两者组合在一起，就是称之为"应用程序领域的状态"，为了区分组件中的状态(state)，这个作为应用程序领域的持久性数据集合，会被称为store(存储)。...payload - 用于更新状态的数据。创建一个Redux存储区，它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问，但只能通过提供的reducer进行更新。...现在，我们的cartReducer什么也没做，但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作(action)。

1.3K2 0

Redux开发实用教程

Redux秉承了Flux单向数据流、Store是唯一的数据源的思想。...为了使用异步action我们需要引入redux-thunk库，redux-thunk是为Redux提供异步action支持的中间件。...默认情况下，createStore() 所创建的 Redux store 没有使用 middleware，所以只支持同步数据流。...当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store； redux一个特点是：状态共享，所有的状态都放在一个store中，任何component都可以订阅store中的数据...；并不是所有的state都适合放在store中，这样会让store变得非常庞大，如某个状态只被一个组件使用，不存在状态共享，可以不放在store中；参考新版React Native+Redux

1.4K2 0

Redux

一.作用与Flux一样，作为状态管理层，对单向数据流做强约束二.出发点 MVC中，数据（Model）、表现层（View）、逻辑（Controller）之间有明确的界限，但数据流是双向的，在大型应用中尤其明显...另外，考虑异步场景： action数量一个异步操作可能需要3个action（或者1个带有3种状态的action），开始/成功/失败，对应的UI状态为显示loading/隐藏loading并显示新数据...UI状态（简单场景及UI状态变化可能不需要作为store的一部分，而应该在组件级来维护）把state看做数据库对于复杂的应用，应该把state当做数据库，存放数据时建立索引，关联数据之间通过id来引用...store 而Flux有多个store，并把状态变更作为事件广播出去，组件通过订阅这些事件来同步当前状态 Redux没有dispatcher的概念因为依赖纯函数，而不是事件触发器。...用不可变的数据结构，是出于性能（不可变相关的额外处理）和灵活性（可以配合const、immutablejs等使用）考虑八.问题与思考 1.state变化订阅机制的粒度控制是怎样的？

1.3K4 0

如何在 React 应用中使用 Hooks、Redux 等管理状态

如何使用 useState hook 为了在我们的组件中实现状态，React 为我们提供了一个名为 useState 的钩子（hook）。让我们看看它是如何与以下示例一起工作的。...Redux 中有三个主要的构建块： store — 一个保存应用状态数据的对象 reducer — 一个由动作类型（action type）触发，并返回一些状态数据的函数 action — 一个告诉 reducer...在 Redux 中，store 是拥有所有应用程序状态信息的实体。多亏 Redux，我们能够从任何想要的组件中访问 store（就像使用 context 一样）。...使用 store 的方式与 Redux 类似，但不同之处在于，在 Zusand 中，store 是一个 hook，它需要的模板要少得多。...因此，我会坚持基本的东西，除非因为某些原因，基本的东西已经不够用了。当需要更具体、更强大的状态管理库时，我认为应该在可靠性和简单性之间做出选择。

8.5K2 0

React 原理问题

以setState为例，在 react 内部，每个组件(Fiber)的 hooks 都是以链表的形式存在memoizeState属性中。...使用 Redux 或者 Mobx 等状态管理库使用订阅发布模式 11. React 父组件如何调用子组件中的方法？...redux是将整个应用状态存储到一个地方成为store, 里面保存着一个状态树store three, 组件可以派发（dispatch）行为（action）给store, 组件内部通过订阅store中的状态...对store管理不同 Redux将所有共享的数据集中在一个大的store中，统一管理 Mobx按模块将状态划出多个独立的store进行管理 3....数据可变性的不同 Redux强调的是对象的不可变性，不能直接操作状态对象。而是在原来状态对象的基础上返回一个新的状态对象，最后返回应用的上一个状态 Mobx可以直接使用新值更新状态对象 4.

2.5K0 0

React中的Redux

学习必备要点：首先弄明白，Redux在使用React开发应用时，起到什么作用——状态集中管理弄清楚Redux是如何实现状态管理的——store、action、reducer三个概念在React中集成...store是一个类似数据库的存储（或者可以叫做状态树），需要设计自己的数据结构来在状态树中存储自己的数据。 Redux入门 Redux简介 Redux是一个状态集中管理库。...store-tree.png so，存储在store中的数据结构是由reducer确定的。数据流严格的单向数据流是Redux架构的核心设计。...使用 ES6 的默认参数值语法来设置初始 state 很容易，但你也可以手动检查第一个参数是否为 undefined。...我们先来分析一下状态，列表页面的状态。状态（state）是一种数据结构，存储在store中的数据异步加载的页面的状态：“加载中；加载成功，展示列表；加载失败” 这三种状态。

4K2 0

react+redux+webpack教程3

action，就把数据放到相应的状态里就行了。...下面，先别着急修改我们的ajax请求，先通过打印一些日志来熟悉一下中间件。 action的派发和被reducer处理都是由store控制的，所以中间件的注册应该在store的代码里。...thunk中间件虽然非常简单，但它让redux具有了在action里面派发action的能力，这样我们的action就不仅仅是指导reducer如何处理状态，而可以做一切不纯粹处理数据的事情。...在action里，我们只需要把所有有用的数据都传给reducer，嗯，名字也最好改个合适的。除此之外，关键字也要保存到状态里，以供翻页时使用。...不过实际开发中还是推荐使用单独的样式表文件。另外，在webpack的帮助下，每个组件最好对应一个样式文件，在组件文件中require进来，这样组件就能保持完整的模块化。

1K10 0

谈谈 React + Redux 的可复用性

导语业务背景介绍：腾讯云数据库产品中心 & 大数据及人工智能产品中心前端从2016年初开始尝试 React + Redux 全家桶，期间经历了很多波折，到目前为止总共28个项目，其中有15个项目使用了该方案...模块D Redux Reducer 并将上述Reducer均注册到Redux Store。...4、Redux状态隔离 Redux状态隔离指的是每个业务层模块只能更新自己Token下面的状态子树，这样业务层模块职责单一，高内聚低耦合，在复杂的情况下代码不会出现难以维护的情况。...特别要说明的是，QMRR组件是使用Remod框架输出的可复用业务层组件，该组件包含React 业务组件与Redux 相关业务层代码，与传统Page不同的是，使用了Remod内置的connect方法延迟连接到...Redux Store, 真正connect操作在 Page引用该业务层组件的时候完成。

3.6K2 0

深入理解 Redux 原理及其在 React 中的使用流程

而状态管理库 Redux 的出现，为我们的应用提供了一种优雅的状态管理方案。本篇文章将详细介绍 Redux 的原理以及如何在 React 项目中使用 Redux。正文内容一、Redux 原理解析1....Store（存储）：Store 是一个保存应用程序状态的 JavaScript 对象。在一个 Redux 应用中，通常只有一个顶级的 Store。2....State（状态）：State 是 Redux 中存储的应用程序当前状态。它是一个 JavaScript 对象，可以保存任何类型的数据。3....连接 React 组件与 Redux Store使用 react-redux 提供的 connect 函数，将 React 组件与 Redux Store 进行连接，使组件能够访问 Store 中的状态并向...Redux 为我们的应用提供了一个集中式的状态存储，使得状态管理变得更加清晰和可控。希望本文能帮助您更好地理解 Redux 的原理及其在 React 中的使用流程。

2323 1

单向数据流-从共享状态管理：fluxreduxvuex漫谈异步数据处理

action 可以理解为应用向 store 传递的数据信息（一般为用户交互信息） dispatch(action) 是一个同步的过程：执行 reducer 更新 state -> 调用 store 的监听处理函数...Vuex数据流的顺序是: View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变(vue检测到数据变化自动渲染) redux 推荐使用 Object.assign...React-Redux vs VUEX 对比分析和组件结合方式的差异通过VUEX全局插件的使用，结合将store传入根实例的过程，就可以使得store对象在运行时存在于任何vue组件中。...这样看来我认为VUE是更推荐在使用了VUEX的框架中的每个组件内部都使用store，而React-Redux则提供了自由选择性。...Redux毕竟是独立于React的状态管理，它与React的结合则需要对React组件进行一下外包装。而VUEX就是为VUE定制，作为插件、以及使用插入的方式就可以生效，而且提供了很大的灵活性。

3.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭