从redux获取数据。为什么我的加载屏幕不工作？

从redux获取数据是指在前端开发中，通过redux这个状态管理库来获取数据。Redux是一个用于JavaScript应用程序的可预测状态容器，它可以帮助我们管理应用程序的状态，并使状态的变化可追踪和可预测。

要从redux获取数据，需要进行以下步骤：

在应用程序中安装redux，并创建一个store来存储应用程序的状态。
在组件中使用connect函数将组件连接到redux的store。
在组件中定义一个action来触发数据获取的操作。
在reducer中处理该action，并更新store中的状态。
在组件中使用mapStateToProps函数将store中的状态映射到组件的props中。
在组件中使用props来获取redux中存储的数据。

如果你的加载屏幕不工作，可能有以下几个原因：

检查你的redux store是否正确地存储了数据。可以使用redux开发者工具来检查store中的状态。
确保你的action被正确地触发，并且reducer正确地处理了该action。可以在reducer中打印一些日志来检查是否正确地处理了action。
检查你的组件是否正确地连接到redux的store，并且使用了正确的mapStateToProps函数来映射状态到props。
确保你的组件正确地使用了props来获取redux中的数据。

如果以上步骤都正确无误，但加载屏幕仍然不工作，可能是由于其他原因，比如网络请求失败或者加载屏幕的实现有问题。可以进一步检查网络请求是否成功，并且检查加载屏幕的代码是否正确。

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

腾讯云官网：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/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关·内容

从长亭的wiki上获取我想要的数据

，所以这就是一个比较好的资源库，有大量的喜欢分享的朋友在上面，所以这就是我的目标。...今天的主题是长亭的 wiki，也就是 wiki.ioin.in。获取 wiki 平台上所有的文章链接这个工作肯定不是通过纯手工可以搞定的，必须使用工具，那么自己写工具吗？...保存完之后，就可以用我们的 emeditor，这个编辑器是我最喜欢的，功能很强大，把所有短链接提取出来，如下图： ?...分析获取的链接数据拿到结果之后，我们要把这里面涉及的网站做个统计，看看哪些网站出现的次数最多，发布的文章最多，这里可以使用 linux 下的两个命令：sort 、 uniq。...下面就可以看小伙伴的博客，如果内容比较好的，我就联系大家了。

1.8K0 0

为什么我的数据不按顺序排序原来如此 | Java Debug 笔记

我的接口返回的数据顺序总是不固定问题描述====我在开发突发奇想。将表头信息也给查出来一并返回给前端了。但是正因为这一举动却带来嘲讽。...说我的接口顺序不对问题定位====首先说明下这个问题是刚入行时遇到的。当时很是困惑，当然啦现在看来真的是贻笑大方了。刚入行那会一直都是使用Mybatis 框架实现数据的获取的。...突然接到一个需求是要求将数据列按照一定顺序返回。前端直接按照我返回的顺序进行渲染。刚接到需求觉得很简单，将数据依次写入就行了。关于具体需求我们就不深究了。下面梳理下当时发现问题及解决的一个过程吧。...决定一探究竟为什么LinkedHashMap 可以实现按照写入顺序排序。通过结构图我们清楚看到他是HashMap的子类。所以他的存储结构和HashMap基本上是一样的。...在每次通过HashMap put进数据之后会将当前添加进来的数据和上次添加的node进行链表关联。这样就使其都在一条链上我们上面添加的数据最终其内部一个结构图如下当然内部会有一个默认的节点作为头结点。

1131 0

为什么我要拒绝梦寐以求的数据科学家工作？

作者: Admond Lee 编译: Mika 本文为 CDA 数据分析师原创作品，转载需授权在深入探讨这个问题前，让我们退后一步，先试着回答另一个问题：为什么要成为数据科学家？...最近IBM预计，到2020年数据科学家的市场需求将飙升28％。这些吸引人的就业前景也让许多人投入数据科学的领域。那么你肯定会想知道：为什么我要拒绝一份数据科学家的工作呢？...申请数据科学家工作几个月前，我向好几家公司投了简历，希望获得一份数据科学家的工作。...职责包括从基础工作到全局统筹，这意味着求职者必须兼顾多个角色，同时还要符合职位要求。在我看来，这份工作描述太离谱了，并且要求至少3到5年的初级职位工作经验。...我真正想做的是，从了解业务问题、收集数据、进行可视化、原型设计、调整并将模型部署到现实应用阶段，使用数据解决复杂问题，从而在完成挑战中收获满足感。

9133 0

Excel应用实践19：根据工作表某列中的值从另一工作簿中获取数据

excelperfect 在下图1所示的工作簿Data.xlsx的工作表Sheet1中，存放着待使用的数据。 ?...图1 在下图2所示的工作簿GetData.xlsm中，根据列C中的数据，在上图1的工作簿Data.xlsx的列E中查找是否存在相应数据的单元格。 ?...图3 在工作簿GetData.xlsm中，输入代码： Sub CopyData() '关闭屏幕刷新 Application.ScreenUpdating = False '声明变量...LastRow As Long Dim wksData As Worksheet Dim rng As Range Dim rngFound As Range '赋值为存储数据的工作表...Exit Sub Else '遍历所选的单元格 For Each rng In Selection '在数据工作表中查找相应的值所在的单元格

18.6K3 0

从 PERL 脚本获取输出并将其加载到 MySQL 数据库的解决方案

1、问题背景有一段 Python 脚本可以调用 Perl 脚本来解析文件，解析后，Perl 脚本会生成一个输出，这个输出将被加载到 Python 脚本中的 MySQL 数据库中。...2、解决方案在 Python 脚本中，使用 subprocess.Popen() 函数来调用 Perl 脚本时，需要在 Popen() 函数的 stdout= 参数中设置一个管道，以便将 Perl 脚本的输出重定向到该管道中...这样，就可以在 Python 脚本中读取 Perl 脚本的输出，并将其加载到 MySQL 数据库中。...修改后的 Python 脚本如下：pipe = subprocess.Popen(["perl", "....MySQL 数据库中。

931 0

设计师都能懂的 Redux 指南

他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？...你们很多人可能都听说过，它的工作是状态管理。稍后我将解释状态管理的含义，此刻，我只能想让你看下面这张图: 为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。...如果我们的 UI 是这样构造的，那么在填充UI之前，我们什么时候获取数据以及在哪里存储数据假设每个组件中都有一个厨师。从服务器获取数据就好比是采购所需的所有原材料以准备佳肴。...我们可以从容器组件中获取数据，例如 Dribbble 示例中的 Shot 组件，并将其用作单一的数据来源。这种方法比从每个组件获取数据的简单方法更有效。...如果你完全不会 Redux 和 React ，不推荐你两者同时学习。 “样板” 代码在许多情况下，使用Redux意味着编写更多代码。通常需要接触多个文件才能使一个简单的功能正常工作。

1.6K1 0

从设计的角度看 Redux

你知道 Redux 真正的作用远不止状态管理吗？你是否想要了解 Redux 的工作原理？让我们深入研究 Redux 可以做什么，它为什么做它的事情，它的缺点是什么，以及它与设计有哪些关联？...他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？...为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。这是一个有点复杂的工具，学习曲线相对陡峭，但这是否意味着我们作为设计师应该远离它？不。...我们可以从容器组件中获取数据，例如 Dribbble 示例中的 Shot 组件，并将其用作单一的数据来源。 ? 这种方法比从每个组件获取数据的简单方法更有效。...如果你完全不会 Redux 和 React ，不推荐你两者同时学习。 “样板” 代码在许多情况下，使用Redux意味着编写更多代码。通常需要接触多个文件才能使一个简单的功能正常工作。

1.7K3 0

为什么我不再用Redux了

我们获取数据，通过 reducer/action 将其添加到存储中，并定期重新获取以确保它是最新的。我们用 Redux 做的事情太多了，甚至把它看成是解决问题的全面解决方案。...React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 和几个 hooks，用于管理查询（获取数据）和突变（更改数据）。...我使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取的简单 TODO 列表。...、缓存和无效化，只是加载数据并在加载时将其存储在全局存储中而已。...不管它们谁会在不久的将来成为事实规范，从它们中重构都要比 Redux 那堆乱麻要简单许多。

2.6K2 0

前端一面react面试题总结

两者对⽐：redux将数据保存在单⼀的store中，mobx将数据保存在分散的多个store中redux使⽤plain object保存数据，需要⼿动处理变化后的操作；mobx适⽤observable保存数据...所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。...与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错...，就会触发一次额外的渲染，多调用了一次 render 函数，由于它是在浏览器刷新屏幕前执行的，所以用户对此是没有感知的，但是我应当避免这样使用，这样会带来一定的性能问题，尽量是在 constructor...constructor 为什么不先渲染？由ES6的继承规则得知，不管子类写不写constructor，在new实例的过程都会给补上constructor。

2.8K3 0

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

你可以简写成 mapState 或者用任何你想的方式调用。只要你接收 state 对象然后返回全是 props 的对象，那就没问题。 为什么不传整个 state？...从 React 组件 Dispatch Redux Actions 现在我们的 Counter 已经被 connect 了，我们也获取到了 count 值。..., getState) { // 在这里 dispatch actions // 或者获取数据 // 或者该干啥干啥 }} 从技术角度讲，被返回的函数就是 “thunk”，把它作为返回值的就是...// 同样，把从服务端获取的数据赋给 items。...这样想吧：当没有商品或者正在加载或者发生错误的时候应用需要展示一些东西。在数据准备好之前，你可能不想只展示一个空白屏幕。这给你了一个提供良好用户体验的机会。每一个“在看”，都是对我最大的肯定

4.2K2 0

如何优化你的超大型React应用

一旦使用这类型技术架构，状态数据集中管理，单向数据流，不可变数据，路由懒加载，按需加载组件，适当的缓存机制(PWA技术)，细致拆分组件，单一数据来源刷新组件，这些都是我们可以精细化的方向。...上面返回的script标签,里面已经注水，将在服务端获取到的数据给到了全局window下的context属性，在初始化客户端store时候我们给它脱水。...初始化渲染使用服务端获取的数据～ import thunk from 'redux-thunk'; import { createStore, applyMiddleware } from 'redux...生命周期中发送ajax等获取数据时候，先判断下状态树中有没有数据，如果有数据，那么就不要重复发送请求，导致资源浪费。...～普通的脚本给script标签，加上async标签，遇到此标签，先去请求，但是不阻塞解析html等文件～，请求回来就立马加载给script标签,加上defer标签，延迟加载，但是必须在所有脚本加载完毕后才会加载它

2.1K5 0

你需要的react面试高频考察点总结

但是Redux状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生，完整的提供了一套状态管理模式。...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。...所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。...与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错...，它的工作原理？

3.6K3 0

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

redux-toolkit query RTK Query 是一个强大的数据获取和缓存工具。它旨在简化 Web 应用程序中加载数据的常见情况，消除了手动编写数据获取和缓存逻辑的需求。...然而，用户仍然需要编写大量的 reducer 逻辑来管理加载状态和缓存数据。在过去的几年中，React 社区意识到“数据获取和缓存”实际上是与“状态管理”不同的一组问题。...UI 层一起使用 API 端点是预先定义的，包括如何从参数生成查询参数和将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks，为组件提供数据和 isLoading...字段，并在组件挂载和卸载时管理缓存数据的生命周期 RTK Query 提供了“缓存条目生命周期”选项，可以通过 WebSocket 消息流式传输缓存更新，以在获取初始数据后使用我们有从 OpenAPI...由于大约有 30 个独特的表单，很快就明显发现，我们可以通过标准化不仅是输入组件，还有数据在表单中的流动方式来获益。 为什么不使用 Redux-Form？

5563 0

阿里前端二面必会react面试题总结1

为什么它很重要？组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。...redux有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。...redux 有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render，可能会有效率影响...所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。...与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错

2.7K3 0

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

用户的使用方式非常简单用户之间没有协作不需要与服务器大量交互，也没有使用 WebSocket 视图层（View）只从单一来源获取数据从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。...某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中，数据在组件中是单向流动的，这是react...大家觉得我能如愿在第一次加载的时候能拿到数据吗？...从React页面渲染来说：页面肯定是先渲染，不会关心dispatch，也不会关心action，只会关心我store里面数据的变化，其实也就是我第一次useEffect的时候，数据取得其实是初始值。...对于这个问题，在我这份代码里面，目前我想到了三个解决方法： 1、定义初始值loading为true，当我们dispatch成功把数据存入的时候，才将loading改为false，写一个加载动画，用这个loading

3.8K3 0

百度前端高频react面试题（持续更新中）_2023-02-27

所谓 Pre-commit，就是说我在这个阶段其实还并没有去更新真实的 DOM，不过 DOM 信息已经是可以读取的了； Commit 阶段：在这一步，React 会完成真实 DOM 的更新工作。...React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。...尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context 对于组件之间的数据通信或者状态管理，有效使用...所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。...与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错

2.3K3 0

高级前端react面试题总结

componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。...所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。...与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错...所谓 Pre-commit，就是说我在这个阶段其实还并没有去更新真实的 DOM，不过 DOM 信息已经是可以读取的了；Commit 阶段：在这一步，React 会完成真实 DOM 的更新工作。...props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,

4K4 0

【小狮子前端】「Redux」概念理解+实战上手（内含大量实例）

没有用过sandbox的，我展示一下大概长这样： [image.png] 个人觉得这样比较直观一些，所以后面有的还是贴的链接～ todo这种例子还是比较简单的，相当于入门，理解Redux工作。...3.React 组件从 Redux store 中读取数据，向 store 中分发 actions 更新数据还不够方便。...redux对hooks的支持首先介绍几个核心： useSelector：用于从Redux存储的state中提取值并订阅该state。...redux总结 为什么还是要用redux？...对于一些场景的需求hooks没法解决：需要保存或者加载状态跨组件共享状态需要与其他组件共享业务逻辑或数据处理过程配合hooks新的redux带来的不一样的改变：通过使用useSelector、useDispatch

1.3K0 0

前端框架_React知识点精讲

1.3K1 0

美团前端一面必会react面试题4

React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。...如何避免重复发起ajax获取数据？数据放在redux里面在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？...尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context对于组件之间的数据通信或者状态管理，有效使用props...所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。...与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错

3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云