我正在导出一个与Redux连接的组件，但它不工作，我不知道为什么 - 腾讯云开发者社区

connect 是一个 React-Redux 函数，它将 React 组件连接到应用程序的 Redux 存储。怎么样？...好吧，根据官方文档（https://react-redux.js.org/api/connect）的说明，它执行以下操作： “…返回一个新的连接组件类，它将会包装你传入的组件。”...，包裹着四个较小的连接组件。...在匹配函数之后，我们来到 connectHOC，这个函数接受我们的 React 组件并将它连接到 Redux。...我将结束这里的深度探讨，如果我继续的话，将是查阅我之前发现的参考资料的最佳时机，因为它包含了对代码库的非常详细的解释。总结刚开始阅读源代码时很困难，但与所有的事情一样，随着时间的推移会变得更容易。

9502 0

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

.但它只能扩展到具体某一个组件.React仅仅是一个视图层库.最终你决定(把状态管理)迁移到一个更为成熟的解决方案,如Redux.接下来我想在这篇文章中指出在跳上Redux的列车前,你应该了解清楚的有关...通常人们会同时学习React和Redux,但这有一些缺点: 他们不会遇到在仅使用本地组件状态(this.state)时,扩展状态管理时出现的问题因此他们没法理解为什么需要Redux这一类状态管理工具...高阶组件概念在后面会显得尤为重要,因为在使用像Redux这样的库的时候,你将会遇到很多高阶组件.当需要使用Redux这一类库将状态管理层和React的视图层"连接"起来时.你通常会使用一个高阶组件来处理这层关系...容器与展示模式(容器组件与展示组件) 因为Dan Abramov的博文,容器和演示模式变得流行了起来.如果你对此并不十分了解,现在正是深入学习的时机.基本上它会将组件分为两类:容器组件和展示组件.容器组件负责描述组件是如何工作的...后记希望这篇文章为你理清了再应用像Redux一类的库之前,你应该学习和了解的内容.目前,我正在写一个关于Redux和本地状态管理的书,内容包括Redux和MobX.如果不想错过的话,你可以点这进行订阅

1.2K8 0

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

是的

没有找到

设计师都能懂的 Redux 指南

请不要用 Google 搜索花哨的后端的东西我听说过它，但我不知道它是什么，这可能是一个 React 框架是一种在 React 应用中存储管理状态的更好方式这个问题，我问过 40 多位设计师，以上是他们的经典回答...他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？...你们很多人可能都听说过，它的工作是状态管理。稍后我将解释状态管理的含义，此刻，我只能想让你看下面这张图: 为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。...它能够为你完成大量繁重的工作。。 Redux 可以非常轻松地通过网络发送正在发生的事情。接收另一个用户在另一台机器上执行的操作，重放更改并与本地发生的操作合并是很简单的。...2019 前端工程师自检清单与思考为什么现在面试总是面试造火箭？「一个有温度的前端号」长按识别二维码关注

1.7K1 0

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

最终你会决定去使用一个更加复杂的状态管理解决方案，比如 Redux，但还有一些我想要在此文中提醒的事项，在你踏上 Redux 的列车以前，这些关于 React 的事项是你应该了解的。...通常大家会同时学习 React 和 Redux，但这会产生一些问题：在仅使用本地状态(this.state)的场景下，大家从不会遇到跨页面状态管理的问题因此不会理解为什么需要一个像 Redux 这样的状态管理库...当像 Redux 这样的库将状态管理和 React 视图层“连接”(connect 方法，react-redux 中将组件和 state 连接的重要方法，译者注) 起来的时候，你会经常使用高阶组件来完成这部分连接的工作...通常，当使用一个复杂状态管理库的时候，比如 Redux 和 MobX，你在某个地方把状态管理层连接到 React 视图层上，这就是为什么你在 React 中提及高阶组件。...在更深入 Redux 以前，理解这种模式背后的原理很有必要。使用状态管理库的时候，你会把组件“连接”到状态上。这些组件不关心外观形态，但更关心如何工作，因此这些组件是容器组件。

1.1K2 0

从设计的角度看 Redux

请不要用 Google 搜索花哨的后端的东西我听说过它，但我不知道它是什么，这可能是一个 React 框架是一种在 React 应用中存储管理状态的更好方式这个问题，我问过 40 多位设计师，以上是他们的经典回答...他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？...为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。这是一个有点复杂的工具，学习曲线相对陡峭，但这是否意味着我们作为设计师应该远离它？不。...但 React 正在快速着手解决这些问题！事实上，Redux 的作者 Dan Abramov 在几年前已经加盟 Facebook 的 React 核心团队。...它能够为你完成大量繁重的工作。。 ? Redux 可以非常轻松地通过网络发送正在发生的事情。接收另一个用户在另一台机器上执行的操作，重放更改并与本地发生的操作合并是很简单的。

1.7K3 0

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

你可以把数据想象成电流，通过彩色电线连接需要它的组件。数据通过线路上下流动，但是线路不能在空气中贯穿 —— 它们必须从一个组件连接到另一个组件。...就像一个规则工厂，我甚至不知道那是什么。是的，Redux 就像一个霸道的父母。但它是出于爱。函数式编程的爱。 Redux 建立在不变性的基础上，因为变化的全局 state 是一条通往废墟之路。...现在我们用 connect 函数调用把它包装起来，这样我们就可以导出已连接的 Counter。至于应用的其余部分，看起来就像一个常规组件。然后 count 应该就重新出现了！...你可以传整个 state，然后让组件梳理。但那不是一个很好的习惯，因为组件需要知道 Redux state 的结构然后从中挑选它需要的数据，后面如果你想更改结构会变得更难。...这样想吧：当没有商品或者正在加载或者发生错误的时候应用需要展示一些东西。在数据准备好之前，你可能不想只展示一个空白屏幕。这给你了一个提供良好用户体验的机会。每一个“在看”，都是对我最大的肯定

4.3K2 0

【React】653- 22 个让 React 开发更高效更有趣的工具

它会扫描项目中的组件，并且可以实现以下功能：用属性、上下文和状态的任意组合下渲染组件模拟每个外部依赖项（例如 API 响应、localStorage 等）与正在运行的实例进行交互时，查看应用程序状态的实时变化...转换后的 React 组件仍将是一个组件，只是现在已转换为一个目录。例如，假设我们正在创建一个 React 组件，它把文件作为属性以显示有用的信息，比如它们的元数据。...我不知道为什么提到这个网站的人不多，但在这个页面我发现了几乎所有我需要的信息，它快捷、方便，并不断更新，总是能为我所有的项目提供所需的结果。...Awesome React Awesome React 开源库是一个与 React 相关的并非常棒的列表。这让我可能会忘记其他网站只从这个链接学习 React 。...它是 Electron 的替代产品，只有一些简洁的功能，包括：与 React Native 相同的语法适用于现存的 React 库，例如 Redux 跨平台原生组件，不再有 Electron 与所有正常的

2.1K2 0

22 个让 React 开发更高效更有趣的工具

2.1K3 1

22 个让 React 开发更高效更有趣的工具

10.3K3 1

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

虽然它还不完整，但我想与你分享我的进展。为什么这么做？该项目已经在使用Enzyme进行测试。...接下来我们看看如何解决不同的场景下的问题场景1：测试Redux连接的组件测试仅由props控制的纯组件很容易。但往往情况并非如此。...如果组件依赖于redux状态，那么除非连接到redux状态，否则无法测试所有行为。那么我们该怎么办呢？首先，我们需要创建一个可重用的函数来渲染组件。这有点类似于ReactJS中的渲染属性模式。...它将接受一个store和一个初始状态作为参数。这些是你想要使用redux存储来测试组件的值。...我们可以利用react-router提供的MemoryRouter。我们可以传递URL路径并测试我们的组件。我们稍后将看到它是如何工作的，但首先让我们将其添加到代码中！

1010 0

Angular、React、Vue.js等6 大主流 Web 框架都有什么优缺点？

我觉得这有助于 Facebook 意识到他们还不能更好地了解我们，相信我们来引导项目。希望这将继续贯穿项目的特点和技术方向。很难预测 React 和 Redux 的未来。...何时选择 React + Redux？如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Redux 可能是正确的。...Dojo2 也知道它不单单只是在自己的生态圈发展，通过包含 web 组件导入和导出功能，也意识到需要支持不同的应用实例，但它依旧提供了一个结构化和固有的框架价值，Dojo2 的核心基础仍然是专注于提供交互性...它似乎就像是一个正在进行的工作一样，就像 Dojo 2，但是它已经是一个已发布的框架。大部分的 Aurelia 是坐落在一个人的肩膀上，如果这个人的的注意力或可用性改变，那么将会带来挑战。...我们不知道 Aurelia 是否能够充分的利用这次机会。为什么我会选择 Aurelia？

2.9K0 0

Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点？

2.4K5 0

Redux 学习笔记：创建一个用 Redux 管理的 React 组件流程

幸亏网上有很多靠谱的资料，不然我也不知道何时能搞清楚 Redux 的作用。...可以先从 props 里面导出要被管理的变量，即使还没有，但先写好可以让自己思路更清晰。...同时在组件中也将这些方法的名字从 props 里面导出，即使现在还没有这些方法但先写出来可以让自己思路更清晰。...编写对应的 reducer，一个组件可以有一个对应的 reducer，一个 reducer 中可以有多种对应的操作，一个 action 对应一个操作，reducer 中就是操作的具体步骤，根据 type...利用 reducers 的数据来创建 store，这里代码我还没研究清楚。最后在顶层的组件中用 Provider 把顶层组件包裹起来。相关

6202 0

6 大主流 Web 框架优缺点对比

没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。未来将何去何从？...何时选择 React + Redux ？如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Redux 可能是正确的。...Dojo2 也知道它不单单只是在自己的生态圈发展，通过包含 web 组件导入和导出功能，也意识到需要支持不同的应用实例，但它依旧提供了一个结构化和固有的框架价值，Dojo2 的核心基础仍然是专注于提供交互性...它似乎就像是一个正在进行的工作一样，就像Dojo 2，但是它已经是一个已发布的框架。大部分的Aurelia是坐落在一个人的肩膀上，如果这个人的的注意力或可用性改变，那么将会带来挑战。未来会如何？...我们不知道Aurelia是否能够充分的利用这次机会。为什么我会选择Aurelia？如果您致力于Web模型视图应用程序模块，并且你和你的团队试图想把一些事做的更好，那么Aurelia会是一个选择。

2.2K2 0

基础| 六大主流框架怎么选？这里告诉你！

没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。...如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Redux 可能是正确的。 ...Dojo2 也知道它不单单只是在自己的生态圈发展，通过包含 web 组件导入和导出功能，也意识到需要支持不同的应用实例，但它依旧提供了一个结构化和固有的框架价值，Dojo2 的核心基础仍然是专注于提供交互性...我们感觉很多的观点和概念都是我们对其他框架的批评性的想法，但是这些愿望都没有完全交付。它似乎就像是一个正在进行的工作一样，就像Dojo 2，但是它已经是一个已发布的框架。...我们不知道Aurelia是否能够充分的利用这次机会。为什么我会选择aurelia？

1.1K1 0

6 大主流 Web 框架优缺点对比

1.5K0 0

Angular、React、Vue等 6 大主流 Web 框架都有什么优缺点？

2.3K6 0

38. 精读《dob - 框架使用》

大家吐槽归吐槽，最终活还是得干，Redux 还是得用，就算分析出 js 天生不适合函数式，也依然一条路走到黑，因为谁也不知道未来会如何发展，redux 生态虽然用得繁琐，但普适性强，忍一忍，生活也能继续过...如果别人不幸安装了这种组件，就需要在项目根目录安装一个全家桶。问：虽然数据流+组件具备完全分形能力，但若此组件对 props 有响应式要求，那还是有对该数据流框架的隐形依赖。...复杂的网站由数据驱动比较好，既然是数据驱动，那么可以将业务组件与数据的连接移到顶层管理，一般通过页面顶层包裹 Provider实现： import { combineStores, observable...： this.signal.unobserve() 最近我们团队也在探索如何更方便的利用这一特性，正在考虑实现一个自动请求库，如果有好的建议，也非常欢迎一起交流。...类型推导如果你在使用 redux，可以参考你所不知道的 Typescript 与 Redux 类型优化优化 typescript 下 redux 类型的推导，如果使用 dob 或 mobx 之类的框架

4671 0

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

这些年不管是面试、还是帮读者答疑，我有一个很强烈的感受：很多人对 Redux 的基本操作很熟悉，甚至对它的运作机制也有所了解，但就是不明白为什么要用 Redux，更不清楚 Redux 到底解决了什么问题...Redux 关键要素与工作流回顾 Redux 库和 Flux 架构之间可以说是“你侬我侬”，虽然 Redux 在实现层面并没有按照 Flux 那一套来（比如 Flux 中允许多个 Store 存在，而...Redux 中只有一个 Store 等），但 Redux 在设计思想上确实和 Flux 一脉相承。...Redux 通过提供一个统一的状态容器，使得数据能够自由而有序地在任意组件之间穿梭。复习完 Redux 的工作流，下面我们来结合源码看看这套工作流到底是如何实现的。 5. ...Redux 是如何工作的？我们先来看一下 Redux 的源码文件夹结构，如下图所示：其中，utils 是工具方法库；index.js 作为入口文件，用于对功能模块进行收敛和导出。

8851 0

2019年，React 开发者应该掌握的 22 种神奇工具

该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或现有的项目中。...它会扫描项目中的组件，并且可以实现以下功能：用属性、上下文和状态的任意组合下渲染组件模拟每个外部依赖项（例如 API 响应、localStorage 等）与正在运行的实例进行交互时，查看应用程序状态的实时变化...转换后 React 组件仍将是一个组件，只是现在转换为一个目录而已。例如，假设我们正在创建一个 React 组件，它把文件作为属性以显示有用的信息，比如它们的元数据。...我不确定为什么提到这个网站的人不多，但在这个页面我发现了几乎所有我需要的信息，它快捷、方便，并不断更新，总是能为我所有的项目提供所需的结果。...它是 Electron 的替代产品，只有一些简洁的功能，包括：与 React Native 相同的语法适用于现存的 React 库，例如 Redux 跨平台原生组件，不再有 Electron 与所有正常的

2.4K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

怎样通过读源码提高你的 JavaScript 知识

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

设计师都能懂的 Redux 指南

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

从设计的角度看 Redux

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

【React】653- 22 个让 React 开发更高效更有趣的工具

22 个让 React 开发更高效更有趣的工具

22 个让 React 开发更高效更有趣的工具

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

Angular、React、Vue.js等6 大主流 Web 框架都有什么优缺点？

Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点？

Redux 学习笔记：创建一个用 Redux 管理的 React 组件流程

6 大主流 Web 框架优缺点对比

基础| 六大主流框架怎么选？这里告诉你！

6 大主流 Web 框架优缺点对比

Angular、React、Vue等 6 大主流 Web 框架都有什么优缺点？

38. 精读《dob - 框架使用》

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

2019年，React 开发者应该掌握的 22 种神奇工具

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐