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

为什么我的redux应用程序没有在redux-thunk中缓存异步api调用?

Redux是一个用于JavaScript应用程序的可预测状态容器。它通过统一管理应用程序的状态,提供可预测的状态更新方式,使得应用程序的开发、调试和维护更加容易。而redux-thunk是Redux的一个中间件,用于处理异步的action,它允许我们在action创建函数中进行异步操作,并将异步操作的结果dispatch给Redux store。

如果你的Redux应用程序没有在redux-thunk中缓存异步API调用,可能有以下几个原因:

  1. 没有正确配置redux-thunk中间件:在使用redux-thunk时,需要将其作为middleware应用在Redux store中。你可以通过redux的applyMiddleware函数将redux-thunk添加到中间件链中。确保你已经正确配置了redux-thunk中间件。
  2. 异步API调用没有被正确的封装为thunk action:为了使用redux-thunk处理异步API调用,你需要将API调用封装为thunk action。Thunk action是一个返回函数的action创建函数,在这个函数中可以进行异步操作。确保你的异步API调用被正确地封装为thunk action,并在该函数中进行异步操作。
  3. Redux store没有正确地处理thunk action:Redux store是Redux应用程序中的核心对象,它负责管理应用程序的状态和处理action。确保你的Redux store正确地处理了thunk action。通过使用redux-thunk中间件,Redux store能够识别thunk action,并将其传递给redux-thunk中间件进行处理。
  4. 缓存逻辑没有被正确地实现:如果你希望在redux-thunk中缓存异步API调用,你需要在thunk action中实现缓存逻辑。这可以通过使用适当的缓存数据结构(如对象、数组等)来存储已经获取到的数据,并在每次进行API调用之前检查是否已经存在缓存数据来实现。你可以根据具体的业务需求来决定如何实现缓存逻辑。

综上所述,如果你的redux应用程序没有在redux-thunk中缓存异步API调用,可以检查是否正确配置了redux-thunk中间件,异步API调用是否被正确封装为thunk action,Redux store是否正确地处理了thunk action,以及是否实现了正确的缓存逻辑。

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

相关·内容

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

前段时间,我们写了一篇Redux源码分析文章,也分析了跟React连接库React-Redux源码实现。但是Redux生态还有一个很重要部分没有涉及到,那就是Redux异步解决方案。...继续深入源码前,我们先来思考一个问题,为什么我们要用Redux-Thunk,不用它行不行?...如果你需要通过检查缓存来判断是否发起API请求,这种方法就很好,但是将你整个APP逻辑都构建在这个基础上并不是很好。...Redux中间件范式 前面那篇讲Redux源码文章讲过中间件范式以及Redux这块源码是怎么实现,没看过或者忘了朋友可以再去看看。...Redux-Thunk最主要作用是帮你给异步action传入dispatch,这样你就不用从调用地方手动传入dispatch,从而实现了调用地方和使用地方解耦。

3.6K51

理解 React Redux-Thunk

你可以用来处理推迟任何事件计算或者评估函数,并且 React-Thunk 可以有效地充当应用程序单独线程。...请注意,Reducer 是一个纯函数;因此它不能用于处理 API 调用。它不应该造成副作用,也不应该直接改变 state。 React ,你不应该直接更改 state。...return { ...state, zip: MOR0O0 } 为了让事情简单,Redux-thunk 是一个中间件,使用户能够使用异步函数代替 API 调用。...Redux-thunk 允许一个 action creator 返回一个函数!现在,我们可以做任何异步工作。...怎么使用 Redux Thunk: 构建一个购物车 本教程,我们将使用 Redux Thunk 开发一个简单购物车功能,更好地明白 Thunk 怎么工作。

50220
  • 为什么不再用Redux

    Redux 是 React 生态系统革命性技术。它使我们能够全局范围内存储不可变数据,并解决了组件树 prop-drilling 问题。...相信其中大多数都没有达成目标。有时为了前进。我们需要先退后一步。 如果我们不再在前端代码管理后端状态,而只是将其视为需要定期更新缓存会怎么样呢?...一起使用,并使用异步调用来获取数据。...处理完应用程序数据获取 / 缓存部分后,前端几乎没有全局状态可处理。可以使用 Context 或 useContext+useReducer 处理剩下少量内容,代替 Redux 作用。...本文提到这些库代表了我们单页应用程序管理状态方式变革,并且是朝着正确方向迈出一大步。期待着看到它们能对 React 社区产生怎样影响。

    2.6K20

    每日两题 T35

    redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等) library,它目标是让副作用管理更容易,执行更高效,测试更简单...redux-saga 是一个 redux 中间件,意味着这个线程可以通过正常 redux action 从主应用程序启动,暂停和取消,它能访问完整 redux state,也可以 dispatch...(有点像 async/await,但 Generator 还有一些更棒而且我们也需要功能)。 你可能已经用了 redux-thunk 来处理数据读取。...redux-saga与其他redux中间件比较 •redux-thunk 缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态值,比较灵活,易于控制 •redux-promise优点是...api层与store解耦,缺点是对请求失败,请求情形没有很好处理 •redux-saga 优点是api层与store解耦,对请求,请求失败都有完善处理,缺点是代码量较大 References

    77530

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

    经典异步 Action 解决方案redux-thunk 针对 Redux 源码主流程分析,我们不难看出这样一个规律:Redux 源码只有同步操作,也就是说当我们 dispatch action...支持异步数据流 Redux 中间件有很多,其中最适合用来快速上手应该就是 redux-thunk了。...这也就解释了为什么上面 redux-thunk 调用示例,applyMiddleware 调用明明是作为 createStore 第二个参数被传入,却仍然能够被识别为中间件信息。...redux-thunk 源码其实非常简洁,第一次接触时还是 2016 年,这么多年过去了,很多事情都变了,唯一不变redux-thunk,它仍然那么好懂。...为什么我们应用需要中间件呢?这里,就以 Redux 中间件机制为例,简单和你聊聊中间件背后“面向切面”编程思想。

    40330

    深入理解 redux 数据流和异步过程管理

    这样数据流动是单向,清晰,很容易管理。 这就像为什么我们公司里想要什么权限都要走审批流,而不是直接找某人,一样道理。集中管理流程比较清晰,而且还可以追溯。...没有,这段逻辑依然是组件里写,只不过移到了 dispatch 里,也没有提供多个异步过程管理机制。 解决这个问题,需要用 redux-saga 或 redux-observable 中间件。...redux saga redux action 流程之外,加了一条监听 action 异步处理流程。 其实整个流程还是比较容易理解。...这些控制多个异步过程之间关系 effect 正是 redux-thunk没有的,也是复杂异步过程管理必不可少部分。...redux-thunk没有提供多个异步过程管理机制,复杂异步过程管理还是得用 redux-saga 或者 redux-observable。

    2.5K10

    redux(应用状态管理器)有那么难吗?没有

    其实就是把异步请求抽象成action creator,然后放到了redux代码。 试想一下,如果没有这种方式,你会怎么去处理异步请求?...是不是会在组件或者页面中去发异步请求,然后回调函数dispatch(action)更新state。本质上也没太大区别。但是好处却是很明显。...所以永远不要再reducer做如下操作: ✦ 修改传入state参数 ✦ 执行有副作用操作,比如API请求,路由跳转等 ✦ 调用非纯函数,比如Math.random()或Date.now() 而一旦...以及如何重构reducer代码?可以移步另一篇博客:如何最佳实践设计reducer。 那么,回到最初的话题,引入Redux到我们应用,到底有什么好处?我们为什么需要一个专门状态管理器?...而引入redux之后,我们单纯面向数据编程即可,我们Redux中统一管理数据,然后数据变换会反映到view上,而数据上交互,本质上也是触发了Reduxaction。

    3.4K10

    Redux开发实用教程

    可以看到,整个流程数据都是单向流动Redux和Flux对比 Redux是Flux思想一种实现,同时又在其基础上做了改进。...Redux没有Dispatcher:它使用StoreStore.dispatch()方法来把action传给Store,由于所有的action处理都会经过这个Store.dispatch()方法,所以...虽然React 试图视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足是,React 依旧把处理 state 数据问题留给了你。Redux就是为了帮你解决这个问题。...它应该是完全可预测:多次传入相同输入必须产生相同输出。它不应做有副作用操作,如 API 调用或路由跳转。这些应该在 dispatch action 前发生。...为了使用异步action我们需要引入redux-thunk库,redux-thunk是为Redux提供异步action支持中间件。

    1.4K20

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

    某个组件状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件状态 1.2、为什么要用Redux React,数据组件是单向流动,这是react...换言之,中间件都是对store.dispatch()增强 四、redux异步多种中间件,处理 redux 异步事件中间件,绝对占有举足轻重地位。...redux-saga将react同步操作与异步操作区分开来,以便于后期管理与维护 ,redux- saga相当于Redux原有数据流多了一层,通过对Action进行监听,从而捕获到监听Action...而react- saga则要求较高,难度较大,现在也并没有掌握和实践这种异步管理方式。...(userNameRedux) },[]) ) } BUG分享 需求:一个接口,需要在多个页面调用,而且多个页面互相没有关联,每个页面都去调用这个接口,显然这是浪费性能就想在

    4.3K30

    深度剖析github上15.1k Star项目:redux-thunk

    日益忙碌一周又过去了,是时候开始每周一次总结复盘了,今天笔者就来剖析一下githubstar数15.1k开源项目redux-thunk。...长话短说我们先来看看redux几个核心api及其作用: redux解决真正问题是React组件间状态共享和状态管理问题,通过以上6个核心api我们便能管理复杂状态,并能监听和追溯状态改动。...这里我们并不能在action处理异步逻辑,这也是redux-thunk价值之一,即解决异步调用action。...到这一步我们仍然不能直接进入redux-thunk源码分析,因为我们还是不清楚如何解决上述步骤,因为我们还没有了解redux中间件机制。...在上面的介绍我们了解到redux中间件机制使得我们可以中间件拿到必备dispatch, getState,并且执行之前已经调用了两层middleware,此时我们可以解剖一下createThunkMiddleware

    75320

    社招前端一面react面试题汇总

    (构造函数)调用 super(props) 目的是什么 super() 被调用之前,子类是不能使用 this ES2015 ,子类必须在 constructor 调用 super()...(必考)虚拟 dom 相当于 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要 dom 操作,从而提高性能。... Virtual DOM 没有出现之前,最简单方法就是直接调用 innerHTML。...redux-thunk优点:体积⼩:redux-thunk实现⽅式很简单,只有不到20⾏代码;使⽤简单:redux-thunk没有引⼊像redux-saga或者redux-observable额外范式...redux-thunk缺陷:样板代码过多:与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质;耦合严重:异步操作与reduxaction偶合在⼀起,不⽅便管理;功能孱弱:有⼀些实际开发中常

    3K20

    redux-thunk引发redux middleware和store enhancer浅析

    本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 项目中使用redux-thunk来解决异步请求问题,但是为什么要引入redux-thunk来解决异步请求问题...以setTimeout dispatch场景为例,异步执行时dispatch action就可以实现了 // 1 store.dispatch({ type: 'BEFORE_ASYNC'...redux-thunk, 或者说redux-thunk可以解决什么场景问题;来看下面这个场景,我们上面那份代码可能被多次调用,根据传入参数来执行,于是我们封装一个函数: // 2 function encapsulateFunc...不了解可以戳链接http://www.ruanyifeng.com/blog/2015/05/thunk.html; 对比上述,使用redux-thunk可以帮助我们代码更优雅,封装设计更合理,当然redux-thunk...是我们需要时候才引入,如果我们实际项目明明可以简单解决,就不需要引入redux-thunk了。

    1.1K20

    百度前端必会react面试题汇总

    指出(组件)生命周期方法不同componentWillMount -- 多用于根组件应用程序配置componentDidMount -- 在这可以完成所有没有 DOM 就不能做所有配置,并开始获取所有你需要数据...,异步如果对同一个值进行多次 setState,setState 批量更新策略会对其进行覆盖,去最后一次执行,如果是同时 setState 多个不同值,更新时会对其进行合并批量更新合成事件异步钩子函数异步原生事件是同步...redux-thunk优点:体积⼩:redux-thunk实现⽅式很简单,只有不到20⾏代码;使⽤简单:redux-thunk没有引⼊像redux-saga或者redux-observable额外范式...redux-thunk缺陷:样板代码过多:与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质;耦合严重:异步操作与reduxaction偶合在⼀起,不⽅便管理;功能孱弱:有⼀些实际开发中常...redux-saga优点:异步解耦:异步操作被被转移到单独saga.js,不再是掺杂action.js或component.js;action摆脱thunk function: dispatch参数依然是

    1.6K10

    redux原来如此简单

    Redux 是 JavaScript 状态容器, 提供可预测化状态管理。 那什么是可以预测化,理解就是根据一个固定输入,必然会得到一个固定结果。...一个函数返回结果只依赖于它参数,并且执行过程里面没有副作用,我们就把这个函数叫做纯函数 基础 action 顾名思义,action就是动作,也就是通过动作来修改state值。...幸好,redux提供了一个api就是combineReducers Api。 store store是redux应用唯一数据源,我们调用createStore Api创建store。...高级应用 异步action 我们也看到了,我们reducer只能做同步应用,如果我们需要在reducer,做一些延迟操作,可怎么办 社区已经有成熟类库做这件事件 npm install redux-thunk...from 'redux-thunk' ...

    74510

    RxJS & React-Observables 硬核入门指南

    Redux-observable是一个基于rxjsRedux中间件,允许开发者使用异步操作。它是redux-thunkredux-saga替代品。...本节将比较redux-observable和redux-thunk,以展示redux-observable如何在复杂用例中发挥作用。...但我不讨厌redux- tank,喜欢它,每天都在使用它! 练习1:调用API 用例:调用API来获取文章注释。当API调用正在进行时显示加载器,并处理API错误。...秒钟内没有输入任何东西,并且我们进行了第一次API调用来获取建议。...总结 如果你正在开发一个包含如此复杂用例Redux应用程序,强烈推荐使用Redux-observables。毕竟,使用它好处直接与应用程序复杂性成正比,这从上面提到实际用例是显而易见

    6.9K50
    领券