使用React的钩子useReducer，状态不是“单一的真理来源”吗？App或同级如何获取其他组件的状态？
使用React的钩子useReducer，状态不是“单一的真理来源”。 useReducer是React提供的一种状态管理工具，它可以帮助我们在组件中管理复杂的状态逻辑。与useState相比，useReducer更适用于处理多个相关状态的情况。
在React中，状态应该被视为组件的私有数据，每个组件应该只关心自己的状态。这种单一的真理来源的原则是为了保持组件的独立性和可维护性。因此，一个组件应该只能访问和修改自己的状态，而不能直接获取其他组件的状态。
然而，有时候我们需要在组件之间共享状态或者获取其他组件的状态。这时可以通过props将状态传递给子组件，或者使用React的上下文（Context）来实现跨组件的状态共享。另外，还可以使用全局状态管理工具，如Redux或MobX来管理应用的全局状态。
对于App或同级如何获取其他组件的状态，可以通过以下几种方式实现：
- 使用props传递状态：将需要共享的状态作为props传递给子组件，子组件可以通过props获取并使用该状态。
- 使用React的上下文（Context）：通过创建上下文对象，将需要共享的状态放在上下文中，然后在需要获取状态的组件中使用上下文提供的Consumer组件来获取状态。
- 使用全局状态管理工具：如Redux或MobX，将需要共享的状态存储在全局的状态管理器中，然后在任何组件中都可以通过订阅状态来获取并使用该状态。
需要注意的是，为了保持组件的独立性和可维护性，尽量避免在组件之间直接共享状态，而是通过props传递数据或使用上下文或全局状态管理工具来实现状态共享。这样可以更好地管理和控制状态的变化，减少组件之间的耦合性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎TKE：https://cloud.tencent.com/product/tke
- 人工智能平台AI Lab：https://cloud.tencent.com/product/ai
- 物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
- 移动开发平台MPS：https://cloud.tencent.com/product/mps
- 对象存储COS：https://cloud.tencent.com/product/cos
- 区块链服务BCS：https://cloud.tencent.com/product/bcs
- 腾讯元宇宙：https://www.tencent.com/zh-cn/industries/technology/2021/metaverse.html
相关·内容
default: } const [state, dispatch] = useReducer并在App中实例化了3个计数器。示例位于：
因此，状态似乎是每个计数器组件的本地状态，而不是像Redux上的“单一真理源”？如果应用程序想要获取所有计数器的</em
浏览 5提问于2020-02-14得票数 0
我不想使用单一状态变量或使用功能组件更新整个状态。我写了一个基于useReducer的钩子，如下所示，但我不确定可能的危险效果。安全吗？谢谢。import React, { useReducer } from "react";
export function useCustomState<T>(
浏览 1提问于2021-10-22得票数 1
回答已采纳
import React, { useReducer } from "react";import { useDispatch } from "react-redux";
..。我看到所有的操作都会触发，但是useReducer调度不会更新redux状态。
浏览 0提问于2020-04-02得票数 8
回答已采纳
在中，"Redux可以用三个基本原则来描述:真理的单一来源，状态是只读的，更改是用纯函数进行的。Redux主要是以某种方式编写代码，还是它做了一些我还不明白的事情？这与作为最高公共所有者(或更高)的组件中管理状态的反应概念有何不同？如果您在整个应用程序中指定一个用于
浏览 4提问于2020-05-24得票数 0
1回答
在我的React应用程序中，我有一个redux reducer，它将一个列表作为道具发送到我的组件。
我将道具复制到本地状态，并显示为下拉列表。用户更改了下拉列表，因此我的本地状态也会发生变化。单击cancel，我将调用redux Toastr，这将触发一个方法，用原始props.list重置我的状态。但出于某种原因，props.list也发生了类似于我的状态变化的变化。据我所知，
浏览 2提问于2019-05-04得票数 1
变成这样的东西。s({ b: 2, d: 4,}, true)st = {(在下面的示例中，我使用count和cool作为vars而不是a, b, c, d, e__)import ReactDOMfr
浏览 4提问于2019-04-07得票数 1
回答已采纳
但是，我无法理解提升状态与Redux，流量状态管理在简单比较中的主要区别。
这是否意味着在一个大型web应用程序中不应该使用“提升状态”，并且不可避免地会出现剩余/流。Redux简化了状态管理的整个过程，但除了抽象和简化之外，还有其他优点吗？与“提升状态”相比，通过使用Redux，我们将有一个真理的来源，即我们需要将状态</
浏览 0提问于2018-05-14得票数 11
我有一个深度嵌套的组件层次结构(假设5个组件相互包含)，现在我可能会在其中一个嵌套的(子)组件中执行一些后端请求。在此之后，我想刷新父级上的数据，以便所有内容都显示新数据。对于我用来传递刷新方法的只有一个层次结构步骤，可以从子对象调用。但对于更深的嵌套，这似乎很容易出错，而且不是正确的方法。关于如何正确处理这个问题，有什么建议吗？我在一些地方读到我可以使用上下文a
浏览 0提问于2021-04-26得票数 0
4回答
我正在考虑使用react、useContext和context api来代替redux。话虽如此，我还是希望我的状态在结构上有点复杂。和context api都允许我创建复杂的结构。在使用react的情况下，我可以很好地使用Provider，Consumer/useContext将我的存储状态值传递给我的所有组件。Redux给我的更多信
浏览 0提问于2021-02-03得票数 3
回答已采纳
1回答
我正在开发一个React项目，该项目分为几个模块，每个模块都包含几个组件。还有一个commons模块，它包含两个或多个独立模块通用的组件。我使用上下文API来管理所有的状态。下面是父组件(App.js)的结构。Module1Container，Module2Container...包含各个模块的组件。<Module3Container />
&
浏览 4提问于2019-09-27得票数 0
3回答
使用React类，当构造函数中有state时，您可以将其直接继承到子组件，并使用回调从子组件继承到父组件。如何使用钩子将状态从父对象转移到子对象？useReducer或Redux是唯一的方法吗？
浏览 28提问于2020-05-18得票数 1
回答已采纳
我有一个名为main_homepageComponent的父节点和两个子节点search_barComponent & Iteams_Component 我想做这样的事情： 当用户在search_barComponent的search-box(输入文本)中放置一些文本时，我想隐藏Iteams_Component 层次结构：- --main_homepageComponent
--search_barComponent--Iteams_Component 目前，我正在尝试在我的search_barComponen
浏览 11提问于2021-02-09得票数 1
回答已采纳
我读过多篇关于需要使用Redux的文章，并构建了两个功能齐全的React+Redux应用程序。我甚至在上发布了这个问题，我仍然无法得到我问题的最终答案：第一个项目，我已经建立了一个教程，他基本上把所有的东西保存到商店。第二个项目是个人项目，我在商店中保存的唯一数据是用户帐户信息，因为我需要在整个应
浏览 1提问于2020-04-12得票数 0
回答已采纳
这个问题以前在这里已经问过了，但是我还没有找到任何正确的答案，只是想知道我是否遗漏了什么，或者这是否真的是不可能的。具体来说，钩子和redux-saga (或任何其他中间件)之间有两个主要区别：
redux-saga中的可以在动作分派时触发代码执行，而在钩子中，我只能在状态更改时触发代码执行。这2种逻辑并不总是存在于组件的上下文中，但是某些“背景”逻辑(如初始化、位置检测等)与特定组件无关。在red
浏览 2提问于2020-05-05得票数 2
由于Redux只是整个应用程序中唯一的(也是主要的)数据存储区，我们可以从仅仅通过发出一个带有数据的操作来生成一个新的应用程序状态
浏览 5提问于2020-02-11得票数 0
我一直在阅读关于如何使用JWT的各种教程，例如，在React + Redux应用程序中使用JWT。 在这些教程中，JWT通常保存在本地存储中，并且有到期日期。这很好。但是，我遇到了一些使用authReducer的示例，该an读取JWT onload并将布尔状态isAuthed设置为true或false。此状态用于处理UI更改，如AuthedNavbar或设置专用路由。 这里我担心的
浏览 21提问于2019-03-24得票数 1
我使用的是 Redux ，它是一个很好的方法，可以使用Redux来管理应用程序的状态，并使状态成为“真理的单一来源”。但是在React 16.3中，引入了的新概念，它还提供了一种在组件之间共享值/状态(如Redux )的方法，而不必通过树的每个级别显式传递一个支柱。那么，replac
浏览 0提问于2019-01-02得票数 0
因此，从React 16.8中可以得到钩子。从它们的文档来看，Hooks是功能组件中状态的替代者。基本的钩子是：useState、useEffect、useContext，但是还有一些附加的钩子，其中一个是useReducer，看起来它使用的是与Redux相同的action-dispatch体系结构它更适合特定的项目吗<
浏览 0提问于2019-02-07得票数 72
回答已采纳
1回答
React "useState“不能在回调中调用。必须在React函数组件或自定义React函数中调用。
import React, { useState } from "react";
export default function A
浏览 3提问于2022-11-10得票数 -1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
