开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我必须像"state.topicsReducer.topics“一样访问我的Redux状态？

"state.topicsReducer.topics"是一个典型的Redux状态访问方式，它的存在有以下几个原因：

Redux是一种用于JavaScript应用程序的状态管理工具，它的核心思想是将应用程序的状态存储在一个全局的状态树中，通过Redux提供的API来访问和修改状态。"state.topicsReducer.topics"表示访问Redux状态树中的topics属性，其中topicsReducer是一个Redux reducer函数，用于处理与topics相关的状态更新。
Redux的设计目标是提供一种可预测的状态管理机制，通过将应用程序的状态集中管理，可以更好地追踪和调试状态的变化。使用"state.topicsReducer.topics"这样的方式访问状态，可以明确地指定要访问的状态路径，避免了状态访问的歧义和混淆。
Redux的状态是不可变的，即一旦创建就不能直接修改，只能通过派发action来触发状态的更新。通过"state.topicsReducer.topics"这样的方式访问状态，可以确保在状态更新时不会直接修改原始状态，而是返回一个新的状态对象，保持了状态的不可变性。
在大型应用程序中，状态通常是复杂且嵌套的，通过使用"state.topicsReducer.topics"这样的方式访问状态，可以更好地组织和管理状态的结构，提高代码的可读性和可维护性。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（Elastic Cloud Server，ECS）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（Tencent Kubernetes Engine，TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_for_mysql
腾讯云人工智能（AI）服务：https://cloud.tencent.com/product/ai_services
腾讯云物联网平台（Internet of Things Platform，IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发平台（Mobile Development Platform，MDP）：https://cloud.tencent.com/product/mdp
腾讯云对象存储（Cloud Object Storage，COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（Tencent Blockchain as a Service，TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云虚拟专用网络（Virtual Private Cloud，VPC）：https://cloud.tencent.com/product/vpc

相关搜索:React-Redux为什么我的代码没有从状态中删除项？TypeScript和Redux:为什么需要在我的Reducer状态类型中添加`|unfined`？为什么像往常一样使用openvpn在我的Unbuntu上不再起作用？为什么在我的Redux Store中创建了多个嵌套状态为什么我不能在我的流程图中使用像tf op一样的Keras模型为什么我得不到redux的实际状态？为什么我必须第二次调度一个操作来更新状态？Redux、React、NodeJS、MySQL 为什么我必须通过React中的useEffect钩子来更新内部状态？为什么我无法在React-Native Redux中从我的mapStateToProps访问我的this.state.props会话阵列？为什么我的redux reducer没有设置正确的状态？

相关搜索:

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

有帮助

没帮助

相关·内容

设计师都能懂的 Redux 指南

他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？...你们很多人可能都听说过，它的工作是状态管理。稍后我将解释状态管理的含义，此刻，我只能想让你看下面这张图: 为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。...有时候 React 中的内置功能运行得足够好。但随着应用程序变得越来越复杂，仅凭React 可能会更难管理它的状态。这就是为什么许多人开始使用Redux作为替代。...在 Redux 的术语中这称之为 “派发 (dispatching) 动作”。更改数据的代码必须像数学公式一样。在相同输入的情况下，它必须返回相同的结果。...人们一直在抱怨他们必须用 Redux 编写的样板代码。我知道，这听起来很矛盾。我不是说 Redux 能够用最少的代码实现功能吗？这有点像使用洗碗机。首先，你得花时间仔细地排列盘子。

1.6K1 0

从设计的角度看 Redux

你知道 Redux 真正的作用远不止状态管理吗？你是否想要了解 Redux 的工作原理？让我们深入研究 Redux 可以做什么，它为什么做它的事情，它的缺点是什么，以及它与设计有哪些关联？...他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？...你们很多人可能都听说过，它的工作是状态管理。稍后我将解释状态管理的含义，此刻，我只能想让你看下面这张图: ?...在 Redux 的术语中这称之为 “派发 (dispatching) 动作”。更改数据的代码必须像数学公式一样。在相同输入的情况下，它必须返回相同的结果。...人们一直在抱怨他们必须用 Redux 编写的样板代码。我知道，这听起来很矛盾。我不是说 Redux 能够用最少的代码实现功能吗？这有点像使用洗碗机。首先，你得花时间仔细地排列盘子。

1.7K3 0

一个治愈JavaScript疲劳的学习计划

像其他所有人一样, 我最近碰巧也读了 Jose Aguinaga 的文章 “How it feels to learn JavaScript in 2016”....JavaScript Apps 的构造模块要理解为什么现代 JavaScript apps 看起来这么复杂，你必须首先明白它们是如何工作的。...万一您想要缓存或检视程序，您现在也需要在客户端有一个存储和管理数据的地方。不上不下的地方却是: 恭喜 - 您现在必须应付一个可以像服务器端技术栈一样复杂的客户端技术栈。...React 会让你认识到一些像组件、应用程序状态、无状态的函数式组件等概念，这些概念对你以后都会有所帮助，即使你以后是在使用其他的框架或库。...相反，你必须填一张存款表格，然后给出纳员请求允许操作。类似地，Redux 也不会让你直接修改全局状态。相反，你传递操作给“reducers” ——实现操作并返回更新状态的特殊函数。

7742 0

为什么我不再用Redux了

关键在于，我们的前端和后端状态永远不会真正同步，我们最多可以营造一种它们同步的错觉。这是客户端 - 服务器模型的缺点之一，也是为什么我们需要缓存的原因所在。...但是，同步缓存和保持状态是非常复杂的，因此我们不应该像 Redux 鼓励的那样，从头开始重新创建这个后端状态。当我们开始在前端重新创建数据库时，后端和前端之间的职责界限很快就变得模糊不清。...后端状态的更简单方法我认为有两个库比使用 Redux（或类似的状态管理库）存储后端状态要好用很多。...我发现自己更容易将注意力集中在前端应用程序的 UI/UX 上，不会再时刻操心整个后端状态了。要对比这个库和 Redux 的话，我们来看这两种方法的一个代码示例。...令人欣慰的是，它的语法与 React Query 几乎完全一样。前端状态呢一旦你开始使用这些库，就会发现在绝大多数项目中 Redux 都太笨重了。

2.6K2 0

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

那有些朋友想听听除 Vuex 的其他方案，今天将从 Redux 入手逐渐拓展（如标题一样浅谈）。...回顾上篇：浅谈前端的状态管理（上） Redux 作为 React 全家桶的一员，Redux 试图为 React 应用提供可预测化的状态管理机制。...和大多数状态管理方案一样，Redux 的思想也是发布订阅模式，我们还是以图书馆为例来简单了解一下 Redux。...尽管在 Redux 里还是没办法做到一切都是确定的（如异步）但是应该保证大多数部分都是确定的包括：视图的渲染是可确定的状态的重建是可确定的至于为什么要这么做，上一篇我已有提及。...但是很遗憾在 React 中并没有像 Vue 一样的 keep-alive。

8822 0

Redux异步解决方案之Redux-Thunk原理及源码解析

Redux-Thunk和前面写过的Redux和React-Redux其实都是Redux官方团队的作品，他们的侧重点各有不同: Redux：是核心库，功能简单，只是一个单纯的状态机，但是蕴含的思想不简单...React-Redux：是跟React的连接库，当Redux状态更新的时候通知React更新组件。 Redux-Thunk：提供Redux的异步解决方案，弥补Redux功能的不足。...里面，action creator必须返回plain object，而且必须是同步的。...这两个的用法是不一样的，你需要小心的不要传错了参数，也不要混淆了他们。...Redux中间件范式在我前面那篇讲Redux源码的文章讲过中间件的范式以及Redux中这块源码是怎么实现的，没看过或者忘了的朋友可以再去看看。

3.5K5 1

【React】211- 2019 React Redux 完全指南

为了把 user 数据传递给全部 3 个 Avatar 组件，必须要经过一堆并不需要该数据的中间组件。 ? 获取数据就像用针在采矿探险一样。等等，那根本没有意义。无论如何，这很痛苦。...它有点像应用的“引导页”。它必须从某处开始，对吧？惯用的方式是定义一个 initialState 变量然后使用 ES6 默认参数给 state 赋初始值。...Immer 让你可以像写普通 mutable 代码一样，最终会自动生成 immutable 代码。点击了解如何使用 Immer。建议：如果你是开始一个全新的应用程序，一开始就使用 Immer。...就像 action 常量一样，但它们不是必须品。这是另一层的抽象，如果你不想在你的应用里面使用，那也没关系。不过我还是会解释下它们是什么。然后你可以决定你是否有时/总是/绝不想使用它们。...你可以像其他 action 生成器一样 dispatch 这些 “thunk actions”：dispatch(getUser())。 “thunk” 是什么？

4.2K2 0

基于flux和observer相结合的思想的数据管理器

，这个state实际上被放在mobx的一个store中，你可以像普通的js对象一样，对这个state进行修改，而在修改时，store自动发生触发view的变化。...虽然我们也对state进行来修改，但是这个修改不是通过store的方法实现的，而是我们自己像修改一个js对象一样随意改的。...MobX状态控制示意图（来源）这里需要注意的是“Action”并不是mobx的某个动作或元素，而是指开发者自己像修改js对象一样修改经过observable函数包装过的那个state，而“State”...MobX的思想，建立这一个东西上，那就是observer，即state是可以被观察的，当像修改js对象一样修改state的时候，store是可以知道具体哪里被修改来的。...为什么有了redux/mobx还需要datamanager 状态可以对某一份数据进行引用，这样，似乎状态管理器也可以对数据进行管理了。

8726 0

基于flux和observer相结合的思想的数据管理器

，这个state实际上被放在mobx的一个store中，你可以像普通的js对象一样，对这个state进行修改，而在修改时，store自动发生触发view的变化。...虽然我们也对state进行来修改，但是这个修改不是通过store的方法实现的，而是我们自己像修改一个js对象一样随意改的。...MobX状态控制示意图（来源）这里需要注意的是“Action”并不是mobx的某个动作或元素，而是指开发者自己像修改js对象一样修改经过observable函数包装过的那个state，而“State”...MobX的思想，建立这一个东西上，那就是observer，即state是可以被观察的，当像修改js对象一样修改state的时候，store是可以知道具体哪里被修改来的。...为什么有了redux/mobx还需要datamanager 状态可以对某一份数据进行引用，这样，似乎状态管理器也可以对数据进行管理了。

7991 0

Facebook 新一代 React 状态管理库 Recoil

用 Redux 或 Mobx 不可以吗？因为 React 本身提供的 state 状态在跨组件状态共享上非常苦难，所以我们在开发时一般借助一些其他的库如 Redux、Mobx 来帮助我们管理状态。...这些库目前正被广泛使用，我们也并没有遇到什么大问题，那么 Facebook 为什么还要推出一款新的状态管理框架呢？...像 Redux 它本身虽然提供了强大的状态管理能力，但是使用的成本非常高，你还需要编写大量冗长的代码，另外像异步处理或缓存计算也不是这些库本身的能力，甚至需要借助其他的外部库。...Redux 那样集中定义状态，可以像 Mobx 一样将数据分散定义在任何地方。...，这个模式很类似于 Mobx，使用起来也感觉有点像 observable + computed 的模式，但是其 API 以及核心思想设计的又没有 Mobx 一样简洁易懂，反而有点复杂，对于新手上手起来会有一定成本

1.6K1 0

Rematch: Redux 的重新设计

在本文中，我们将探讨一些你可能一直在问自己的问题：你是否需要一个用于状态管理的库？ Redux 的受欢迎程度是否值得我们去使用？ 为什么或者为什么不值得？我们能否制定更好状态管理解决方案吗?...那么为什么这么喜欢一个简单的库呢？ Redux 更具性能？答案是否定的。事实上，为了每一个必须处理的新动作(action)，都会稍微慢一些。 Redux是否更简单？当然不是。...为什么使用 Redux 在表层之下，Redux 与 TJ 的根对象{}完全相同——只是包装在了一系列实用工具的管道(pipeline)中。在 Redux 中，不能直接修改状态。...重新设计Redux 我认为Redux值得重写，至少有以下 6 个方面可以改进得更友好。...如果 Redux 是基于配置而不是函数组合的话，那么像右边那样的初始化过程明显看起来更加合理。 2.

1.5K5 0

2020 年你应该知道的 React 库

所有这些都可以在 React 中用于复杂的本地状态管理。它甚至可以模拟 Redux(Redux 是 React 的一个流行的状态管理库)。...如果不行，像 Redux 或者 MobX/Mobx State tree 这样的解决方案可能会有所帮助。如果你想了解更多细节，请访问我的综合状态管理反应教程。...建议: DIY: Custom Backend Get it off the shelf: Firebase React 主机您可以像其他 web 应用程序一样部署和托管 React 应用程序。...React 中最常用的 JavaScript 内置功能之一是内置 map() 数组。为什么？因为您总是必须呈现组件中的列表。...，我只能想到以下内容，因为我没有在 React 中使用任何其他内容: Draft.js Slate React 中的支付和其他网络应用一样，最常见的支付提供商是 Stripe 和 PayPal。

14.4K4 0

精读《入坑React前没有人会告诉你的事》

另一篇则是 Facebook 员工，也是 Redux 作者的 Dan Abramov 针对上文的回复《Hey, thanks for feedback!》。 1 引言我为什么要选这篇文章呢？...store 不被外部更新（官方建议是加上特殊的前缀）如果选了 redux，会发现要实现同样的功能需要写很多的重复代码（这也是为什么社区中有海量的 redux helper 存在）路由用起来也很蛋疼...状态管理的迷思在今时今日的前端圈子里，说 React 不说 Redux 就像说 Ruby 却不说 Rails 一样，总感觉缺点儿什么。...@淡苍认为，Redux 与 MobX，React 两大状态管理方案，各有千秋，Redux 崇尚自由，扩展性好，却也带来了繁琐，一个简单的异步请求都必须引入中间件才能解决，MobX 上手容易，Reactive...换，或者不换，其实都一样，安卓和苹果已经越来越像了。讨论地址是：那些入坑 React 前没有人会提醒你的事 · Issue #13 · dt-fe/weekly

5971 0

第十八篇：揭秘 Redux 设计思想与工作原理（上）

这些年不管是面试、还是帮读者答疑，我有一个很强烈的感受：很多人对 Redux 的基本操作很熟悉，甚至对它的运作机制也有所了解，但就是不明白为什么要用 Redux，更不清楚 Redux 到底解决了什么问题...Controller（控制器），用于连接 View 和 Model，管理 Model 与 View 之间的逻辑；原则上来说，三者的关系应该像上图一样，用户操作 View 后，由 Controller...如果项目中的数据关系并不复杂，其实完全轮不到 Flux 登场，这一点对于 Redux 来说也是一样的。...如果你对这三个工具方法感到陌生，也不用急着去搜索，因为它们均独立于 Redux 主流程之外，属于“非必须使用”的辅助 API，不熟悉这些 API 并不影响你理解 Redux 本身。...单纯从使用感上来说，这个方法做的事情似乎就是创建一个 store 对象出来，像这样： // 引入 redux import { createStore } from 'redux' // 创建 store

7071 0

Redux源码浅析

除此之外，就是为了对action有严格限制，必须是一个简单对象plainObject、必须要有type属性，这些都能保证reducer函数处理的时候拿到的action是预期的，可以放心的去执行纯函数。...看到这里我有疑问：为什么需要这个变量？js是单线程语言，这些函数都是同步的，既然是同步场景，我们在调用dispatch时，js会执行完这个函数再处理其他函数，应该不会有交集。...）来保存监听函数，并且在订阅和取消订阅的时候使用了ensureCanMutateListeners方法来执行浅拷贝：图片这里我产生了很大的疑问，为什么要用如此不直观的方法来保存监听者。...，看起来仍然像调用普通的dispatch一样。...对于一个简单的中间件如打印简单日志，它基本长这样：图片我原本对Redux中间件并不熟悉，所以先去看了一下官方概念，对我了解中间件为什么要这么写有很大帮助。

1.6K7 1

Redux从设计到源码

我们为什么要用Redux？ Redux是什么？ Redux是JavaScript状态容器，能提供可预测化的状态管理。它认为： Web应用是一个状态机，视图与状态是一一对应的。...如上图，Store是Redux中的状态容器，它里面存储着所有的状态数据，每个状态都跟一个视图一一对应。 Redux也规定，一个State对应一个View。...可以看到，在整个流程中数据都是单向流动的，这种方式保证了流程的清晰。 为什么要用Redux？前端复杂性的根本原因是大量无规律的交互和异步操作。...我们很容易就对这些状态何时发生、为什么发生以及怎么发生的失去控制。那么怎样才能让这些状态变化能被我们预先掌握，可以复制追踪呢？这就是Redux设计的动机所在。...逆天的DevTools，可以让应用像录像机一样反复录制和重放。

1.4K6 0

从 Redux 设计理念到源码分析

前言 Redux 也是我列在 THE LAST TIME 系列中的一篇，由于现在正在着手探究关于我目前正在开发的业务中状态管理的方案。所以，这里打算先从 Redux 中学习学习，从他的状态中取取经。...为什么要使用 Redux 如上所说，我们现在是状态驱动 UI,那么为什么需要 Redux 来管理状态呢？react 本身就是 state drive view 不是。...任何一个操作都可能会改变 state，那么就会导致我们应用的 state 越来越乱，且被动原因愈发的模糊。我们很容易就对这些状态何时发生、为什么发生、怎么发生而失去控制。 ?...只要传入的 state 和 action 一直，那么就可以理解为返回的新 state 也总是一样的。总结 Redux 的东西远不止上面说的那么些。...因为到这里，你已经完全可以自己写一份状态管理方案了。而 combineReducers也是我认为是费巧妙的设计。

9283 0

从前端视角看 SwiftUI

既然如此，彼此也会遇到类似的问题，元件化开发、状态管理、资料流、管理副作用（API 或是IO）等等，对我来说是个很适合互相学习的领域。...而最近的趋势似乎从 Redux 演变成了 TCA（The Composable Architecture），跟 Redux 的中心思想类似，更容易与 SwiftUI 整合，比较不一样的地方在于以往涉及...我还蛮想了解 SwiftUI 背后是怎么计算 diff 的，希望之后有类似的文章出现 @State 修饰符可用来定义元件内部状态，当状态改变时会更新并反映到画面中。...React 并没有双向绑定机制，必须要显式监听输入事件确保单向资料流。不过像 Vue、Svelte 都有双向绑定机制，节省开发者手动监听事件的成本。...这让我想起了以前研究 RxJS 与 redux-observable 各种花式操作的时光，真令人怀念。

3.5K2 0

前端react面试题（边面边更）

其状态state是在constructor中像初始化组件属性一样声明的。...props 是不可修改的，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。state 是在组件中创建的，一般在 constructor中初始化 state。...，异步任务（通常都是业务或获取数据任务）也不例外，而为了不将业务或数据相关的任务混入React组件中，就需要使用其他框架配合管理异步任务流程，如redux-thunk，redux-saga等;Mobx是一个透明函数响应式编程的状态管理库...适用observable保存数据，数据变化后自动处理响应的操作redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数;mobx中的状态是可变的，可以直接对其进行修改...也就是key值不一样的时候通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的

1.3K5 0

Medium网友开发了一款应用程序让学习算法和数据结构变得更有趣

我觉得我必须比其他人(他们有天生的数学能力)更努力地学习相同的概念。这个想法深深扎根在我的大脑中，我很确定我永远无法学习像“二叉搜索树”这样的东西，以及如何在精神上分析像“归并排序”这样的递归噩梦。...市面上有大量的应用程序，它们教授类似的技能，让你能够在浏览器中编写和运行代码。 为什么我做了这个我开发这款应用的动机很简单:我想让学习变得更简单、更有趣。更重要的是，我为什么要学习这些特殊技能。...因此，我选择了一种更简单的方法来保存进度，而不是实现数据库并请求用户登录。Redux在每个会话期间管理应用程序的状态，我使用localStorage来在会话中持久化代码。...该应用程序将在下一次访问时检索这个保存的状态，并将Redux存储与它解除冻结。这样你就可以在你离开的地方找到你的位置。...它总是相互迁就，你必须决定什么时候高度优化(但更重的)解决方案比简单的解决方案要好。

1.4K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭