首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我的redux thunk Axios调用在我的Redux存储中返回空对象

Redux Thunk是一个Redux中间件,它允许我们编写异步的action creators。Axios是一个基于Promise的HTTP客户端,用于发送HTTP请求。

在你的Redux存储中返回空对象的问题可能是由以下几个原因引起的:

  1. 异步操作未正确处理:Redux Thunk允许我们在action creators中进行异步操作,但需要确保正确处理异步操作的结果。在使用Axios进行异步请求时,需要在请求成功后使用dispatch将数据传递给Redux存储。如果没有正确处理异步操作的结果,Redux存储可能会返回空对象。
  2. Redux存储未正确配置:确保你已经正确配置了Redux存储,并在应用程序的入口文件中应用了Redux Thunk中间件。这样才能正确处理异步操作。
  3. 异步操作的触发时机不正确:检查你触发异步操作的时机是否正确。例如,你可能在组件的初始化阶段触发了异步操作,但此时Redux存储可能还没有完全初始化,导致返回空对象。

针对这个问题,你可以采取以下步骤来解决:

  1. 确保你已经正确配置了Redux存储,并在应用程序的入口文件中应用了Redux Thunk中间件。
  2. 在Redux action creators中使用Axios发送异步请求,并在请求成功后使用dispatch将数据传递给Redux存储。确保你正确处理了异步操作的结果。
  3. 检查异步操作的触发时机是否正确。确保在Redux存储完全初始化后再触发异步操作。

如果你需要更具体的帮助,可以提供你的代码片段,以便更好地理解和解决问题。

关于Redux Thunk和Axios的更多信息,你可以参考以下链接:

请注意,以上链接是为了提供更多信息和参考,不代表任何特定云计算品牌商的产品或推荐。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

webpack4 中的 React 全家桶配置指南,实战!

最新React全家桶实战使用配置指南 这篇文档 是我在听 吕小明老师的课程,吕老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获...多入口文件配置 在之前的配置中,都是基于单入口页面配置的,entry和output只有一个文件,但是实际项目很多情况下是多页面的,在配置多页面时,有2中方法可以选择: 1.在entry入口配置时,传入对象而不是单独数组...根据图上的表述,我这里简单说一下便于理解的结论: 配置中每个文件例如index1.js,index2.js,detail.js,home.js都属于entry point. entry这个配置中,每个key...redux-thunk 是一个比较流行的 redux 异步 action 中间件,比如 action 中有 setTimeout 或者通过 fetch通用远程 API 这些场景,那么久应该使用 redux-thunk...await前提是方法返回的是一个Promise对象,正如Promises类似于结构化回调,async/await类似于组合生成器和 promises。

1.9K20
  • 前端react面试题(必备)2

    整个应用的state被存储在一个object tree中,并且这个object tree 之存在唯一一个store中state是只读的 唯一改变state的方式是触发action,action是一个用于描述已经发生时间的对象...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外的范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量的代码,⽽且很多都是重复性质的耦合严重: 异步操作与redux的...Props 也不仅仅是数据--回调函数也可以通过 props 传递。React中constructor和getInitialState的区别?两者都是用来初始化state的。

    2.3K20

    第二十篇:从 Redux 中间件实现原理切入,理解“面向切面编程”

    经典的异步 Action 解决方案redux-thunk 在针对 Redux 源码主流程的分析中,我们不难看出这样一个规律:Redux 源码中只有同步操作,也就是说当我们 dispatch action...redux-thunk 带来的改变非常好理解,它允许我们以函数的形式派发一个 action,像这样(解析在注释里): // axios 是一个用于发起异步请求的库 import axios from '...这个过程单从表面上看,和普通 Redux 调用最大的不同就是 :dispatch 的入参从 action 对象变成了一个函数。...这就不由得让人对 thunk 中间件加持下的 Redux 工作流心生好奇:action 入参必须是一个对象,这一点我们在第 19 讲分析 dispatch 源码时,可是亲眼见过 action 相关的数据格式强校验逻辑的...redux-thunk 的源码其实非常简洁,我第一次接触时还是在 2016 年,这么多年过去了,很多事情都变了,唯一不变的是 redux-thunk,它仍然那么好懂。

    45530

    前端高频react面试题

    但是对于合成事件来说,有一个事件池专门来管理它们的创建和销毁,当事件需要被使用时,就会从池子中复用对象,事件回调结束后,就会销毁事件对象上的属性,从而便于下次复用事件对象。...这个问题就设计到了数据持久化, 主要的实现方式有以下几种:Redux: 将页面的数据存储在redux中,在重新加载页面时,获取Redux中的数据;data.js: 使用webpack构建的项目,可以建一个文件...这个方法适合一些需要临时存储的场景。Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...在当前组件的 props中,包含 location属性对象,包含当前页面路由地址信息,在 match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们。

    3.4K20

    美团前端react面试题汇总

    redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...mapStateToProps(state,ownProps)中带有两个参数,含义是∶state-store管理的全局状态对象,所有都组件状态数据都存储在该对象中。...但在 React 中会有些不同,包含表单元素的组件将会在 state 中追踪输入的值,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。...存储全局数据时,会有一个问题,如果用户刷新了网页,那么通过redux存储的全局数据就会被全部清空,比如登录信息等。

    5.1K30

    2021高频前端面试题汇总之React篇

    但是对于合成事件来说,有一个事件池专门来管理它们的创建和销毁,当事件需要被使用时,就会从池子中复用对象,事件回调结束后,就会销毁事件对象上的属性,从而便于下次复用事件对象。 2....redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...saga.js 中,不再是掺杂在 action.js 或 component.js 中 action摆脱thunk function: dispatch 的参数依然是⼀个纯粹的 action (FSA......store, dispatch } } } 复制代码 从applyMiddleware中可以看出∶ redux中间件接受一个对象作为参数,对象的参数上有两个字段

    2K00

    前端二面高频react面试题集锦_2023-02-23

    React中setState的第二个参数作用是什么? setState 的第二个参数是一个可选的回调函数。这个回调函数将在组件重新渲染后执行。......store, dispatch } } } 从applyMiddleware中可以看出∶ redux中间件接受一个对象作为参数,对象的参数上有两个字段...使用箭头函数(arrow functions)的优点是什么 作用域安全:在箭头函数之前,每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象;在严格模式下,函数调用中的 this 是未定义的...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga

    2.8K20

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

    redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...或者redux-observable额外的范式,上⼿简单 redux-thunk缺陷: 样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量的代码,⽽且很多都是重复性质的 耦合严重: 异步操作与redux...function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是...当 ref 属性被用于一个自定义的类组件时,ref 对象将接收该组件已挂载的实例作为他的 current。 当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。

    2.3K30

    我是这样在 React 中实践 TDD 编程的

    准备好mock适配器后,我们就可以专注于初始化存储和并编写测试了。 编写测试 这是最有趣的部分。让我们开始TDD。 首先,让我们创建并配置存储。在src目录中,创建一个名为index.js的新目录。...在这个文件中,初始化存储。...Redux reducer逻辑和动作的集合,通常定义在单个文件中。...在这个目录中,添加一个名为user.test.js的文件。这个文件将包含我们将为userSlice编写的测试。 第一个测试是确保存储是空的或未定义的。...我们刚刚使用Redux、thunk和axios mock编写了一些测试 对你来说有点挑战吗?添加诸如删除用户、修改以及检索用户等功能。 结论 在本文中,我们快速介绍了使用Redux的TDD。

    1.9K30

    RxJS & React-Observables 硬核入门指南

    Redux-observable是一个基于rxjs的Redux中间件,允许开发者使用异步操作。它是redux-thunk和redux-saga的替代品。...Observer 观察者模式 在观察者模式中,一个名为“可观察对象(Observable)”或“Subject”的对象维护着一个名为“观察者(Observers)”的订阅者集合。...在本节中,我将比较redux-observable和redux-thunk,以展示redux-observable如何在复杂的用例中发挥作用。...但我不讨厌redux- tank,我喜欢它,我每天都在使用它! 练习1:调用API 用例:调用API来获取文章的注释。当API调用正在进行时显示加载器,并处理API错误。...redux-thunk的实现是这样的: let timeout; var cancelToken = axios.cancelToken; let apiCall; function valueChanged

    6.9K50

    redux-saga_pub culture

    大家好,又见面了,我是你们的朋友全栈君。 本文用以记录从调研Redux Saga,到应用到项目中的一些收获。...在最初的调研中redux-thunk是首先考虑的,redux-thunk是在action作用到reducer之前触发一些业务操作。刚好起到控制层的作用。...put方法 put就是redux的dispatch,用来触发reducer更新store 有什么弊端 目前在项目实践中遇到的一些问题: redux-saga模型的理解和学习需要投入很多精力 因为需要用...这句话使我决定了尝试用saga或thunk来实践把前端分层的设想。...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.4K10

    2021高频前端面试题汇总之React篇

    来担任,store只做存储,中间人,当Reducers的更新完成以后会通过store的订阅来通知react component,组件把新的状态重新获取渲染,组件中也能主动发送action,创建action...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...saga.js 中,不再是掺杂在 action.js 或 component.js 中 action摆脱thunk function: dispatch 的参数依然是⼀个纯粹的 action (FSA...Redux 状态管理器和变量挂载到 window 中有什么区别 两者都是存储数据以供后期使用。

    2K00

    2022社招React面试题 附答案

    来担任,store只做存储,中间人,当Reducers的更新完成以后会通过store的订阅来通知react component,组件把新的状态重新获取渲染,组件中也能主动发送action,创建action...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...saga.js 中,不再是掺杂在 action.js 或 component.js 中 action摆脱thunk function: dispatch 的参数依然是⼀个纯粹的 action (FSA)...Redux 状态管理器和变量挂载到 window 中有什么区别 两者都是存储数据以供后期使用。

    2K50

    字节前端必会react面试题1

    setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。...redux异步流中间件其实有很多,当下主流的异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外的范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量的代码,⽽且很多都是重复性质的耦合严重: 异步操作与redux的...个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是rxjs

    3.2K20

    为什么我不再用Redux了

    Redux 是 React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据,并解决了在组件树中 prop-drilling 的问题。...现在,前端开发中的很大一部分负担来自于我们的全局存储的维护工作,我们还要确保这些存储不会遭受状态错误、数据非规范化和陈旧数据的困扰。...我们获取数据,通过 reducer/action 将其添加到存储中,并定期重新获取以确保它是最新的。我们用 Redux 做的事情太多了,甚至把它看成是解决问题的全面解决方案。...现在,人们围绕 Redux 构建了无数的库(redux-observable、redux-saga 和 redux-thunk 等),以帮助我们管理后端数据,每个库都为已经繁琐不已的库又增加了一层复杂性...后端状态的更简单方法 我认为有两个库比使用 Redux(或类似的状态管理库)存储后端状态要好用很多。

    2.7K20
    领券