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

我将使用什么来启动异步Redux,从下面的Thunk或Saga或可观察或Redux Promise中间件开始?

要启动异步Redux,可以使用以下中间件之一:Thunk、Saga、可观察或Redux Promise。

  1. Thunk中间件:
    • 概念:Thunk是Redux的默认中间件,它允许在Redux中处理异步操作。Thunk中间件允许在action创建函数中返回一个函数而不是一个普通的action对象。
    • 优势:使用简单,无需额外的依赖。
    • 应用场景:适用于简单的异步操作,如发送HTTP请求并处理响应。
    • 推荐的腾讯云相关产品:无
  • Saga中间件:
    • 概念:Redux Saga是一个用于管理应用程序副作用(例如异步调用和访问浏览器缓存)的库。它使用了ES6的Generator函数来使异步流程更易于阅读、写入和测试。
    • 优势:提供了更强大的控制流程,可以处理复杂的异步操作,如多个异步操作之间的依赖关系、取消异步操作等。
    • 应用场景:适用于复杂的异步操作,如长时间的数据获取、WebSocket通信等。
    • 推荐的腾讯云相关产品:无
  • 可观察中间件:
    • 概念:可观察中间件使用RxJS或其他类似的库来处理异步操作。它允许使用Observable对象来表示异步数据流,并通过操作符来处理和转换这些数据流。
    • 优势:提供了更灵活和强大的异步处理能力,可以处理复杂的数据流操作。
    • 应用场景:适用于需要处理复杂数据流的场景,如实时数据更新、数据流转换等。
    • 推荐的腾讯云相关产品:无
  • Redux Promise中间件:
    • 概念:Redux Promise中间件允许在Redux中使用Promise作为异步操作的返回值。它允许在action创建函数中返回一个Promise对象,以处理异步操作的结果。
    • 优势:使用简单,与现有的Promise库兼容。
    • 应用场景:适用于简单的异步操作,如发送HTTP请求并处理响应。
    • 推荐的腾讯云相关产品:无

以上是启动异步Redux的常见中间件选项,根据具体需求和项目复杂度选择合适的中间件来处理异步操作。

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

相关·内容

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

从简单的 react-thunkredux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题的方案 4.1 、redux-thunk redux-thunk...尽管redux-thunk很简单,而且也很实用,但人总是有追求的,都追求着使用更加优雅的方法实现redux异步流的控制,这就有了redux- promise。...4.2、redux-promise 使用redux-promise中间件,允许action是一个promise,在promise中,如果要触发action,则通过调用resolve触发 4.3、redux-sage...redux-sagareact中的同步操作与异步操作区分开来,以便于后期的管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过对Action进行监听,从而捕获到监听的Action...从同步异步的角度来说这个问题:想让异步变成类似同步的操作我们应该怎么办,大家想到的肯定是async/await,阻塞代码,开始一直陷入一个误区,内部的确造成了阻塞,等到data有值了,才会dispatch

4.2K30
  • 一文梭穿Vuex、Flux、ReduxRedux-saga、Dva、MobX

    显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成的支持异步处理的中间件。比如 redux-thunk redux-promise 。...redux-thunkredux-promise 刚好就是代表这两个面。 redux-thunkredux-promise 的具体使用就不介绍了,这里只聊一下大概的思路。...大部分简单的异步业务场景,redux-thunk 或者 redux-promise 都可以满足了。 上面说的 Flux 和 Redux,和具体的前端框架没有什么关系,只是思想和约定层面。...刚才介绍了两个Redux 处理异步中间件 redux-thunkredux-promise,当然 redux异步中间件还有很多,他们可以处理大部分场景,这些中间件的思想基本上都是把异步请求部分放在了...对比 Redux-thunk 比较一下 redux-thunkredux-saga 的代码: 和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:

    5.5K10

    状态管理的概念,都是纸老虎

    显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成的支持异步处理的中间件。比如 redux-thunk redux-promise 。...redux-thunkredux-promise 刚好就是代表这两个面。 redux-thunkredux-promise 的具体使用就不介绍了,这里只聊一下大概的思路。...大部分简单的异步业务场景,redux-thunk 或者 redux-promise 都可以满足了。 上面说的 Flux 和 Redux,和具体的前端框架没有什么关系,只是思想和约定层面。...刚才介绍了两个Redux 处理异步中间件 redux-thunkredux-promise,当然 redux异步中间件还有很多,他们可以处理大部分场景,这些中间件的思想基本上都是把异步请求部分放在了...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取的相关业务逻辑放在了单独的 saga.js 中,不再是掺杂在 action.js component.js

    5.2K20

    一天梳理完react面试高频题

    这种机制可以让我们改变数据流,实现如异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js component.js 中action摆脱thunk...⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import

    4.1K20

    造一个 redux-thunk 轮子

    redux-thunk 不就是那个只有 14 行代码的轮子嘛?一行就能写出来还要你教我做事? 不错,redux-thunk 是一个非常小的库,不到 5 分钟就能理解并造出来。...不过,觉得这是从结果出发找造这个轮子的原因,并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望从解决问题的角度推导 redux-thunk 诞生的原因。...解耦 上面的代码在很多业务里非常常见,常见到我们根本不需要什么 redux-thunkredux-saga 来处理。...函数 发现直接赋值是个很笨的行为,比较高级的是使用中间件改写 dispatch 函数 最后,我们做了一个中间件出来,就叫做 redux-thunk 总结 最后来回答一些redux 社区里看到的一些问题...要不要使用 redux-thunk? 如果你在第 1 步的时候就觉得依不依赖 dispatch 对都没什么影响,在组件里直接用 dispatch 也很方便呀。

    74030

    Redux:从action到saga

    但是当需要处理异步的action(在函数式编程里称为副作用)的时候事情就没有这么简单了。为了解决这个问题,redux建议使用中间件(尤其是thunk)。...使用这个方式会很快导致action生成方法变得复杂并难以测试。这个时候就需要redux-saga了。在redux-sagasaga就是一个可声明的组织良好的副作用实现方式(超时,API调用等等。。)...所以不用再用redux-thunk中间件来写,我们用saga发出action并yield副作用。这样不复杂?action creator这样的写法不是更简单?虽然看起来是这样的,但是NO!...在上面的例子中用了两种副作用: 一个put副作用,它会给redux store分发一个action。 一个call副作用,它会执行一个异步的方法(promise,cps后者其他的saga)。...state使用reducer这样的纯方法修改的。

    1.2K00

    React saga_react获取子组件ref

    通常会与reselect库配合使用。 call 有阻塞地调用 saga 或者返回 promise 的函数,只在触发某个动作。...---- 最近项目中redux中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga使用心得,阅读本文需要了解什么reduxredux中间件的用处是什么...redux-thunk处理副作用的缺点 redux-saga写一个hellosaga redux-saga使用技术细节 redux-saga实现一个登陆和列表样例 ---- 1.redux-thunk...3.redux-saga使用技术细节 redux-saga除了上述的action统一、可以集中处理异步操作等优点外,redux-saga使用声明式的Effect以及提供了更加细腻的控制流。...call方法应用很广泛,在redux-saga使用异步请求等常用call方法实现。

    4.5K30

    redux-saga学习

    如果redux需要用到 side effect 异步操作,redux-thunkredux-saga 绝对是目前两个最受欢迎的中间件插件。...redux-saga redux-saga是一个用于管理redux应用异步操作的中间件redux-saga通过创建sagas所有异步操作逻辑收集在一个地方集中处理,可以用来代替redux-thunk...sagas监听发起的action,然后决定基于这个action什么 (比如:是发起一个异步请求,还是发起其他的action到store,还是调用其他的sagas 等 ) 在redux-saga的世界里...,所有的任务都通过用 yield Effects 完成 ( effect可以看作是redux-saga的任务单元 ) redux-saga启动的任务可以在任何时候通过手动取消,也可以把任务和其他的Effects...为什么不直接传递incrementAsync?直接传一开始调用就被执行,根本不会实现监听效果。

    2.7K10

    手写Redux-Saga源码

    上一篇文章我们分析了Redux-Thunk的源码,可以看到他的代码非常简单,只是让dispatch可以处理函数类型的action,其作者也承认对于复杂场景,Redux-Thunk并不适用,还推荐了Redux-Saga...本文要讲的就是Redux-Saga,这个也是在实际工作中使用最多的Redux异步解决方案。...Redux-SagaRedux-Thunk复杂得多,而且他整个异步流程都使用Generator来处理,Generator也是我们这篇文章的前置知识,如果你对Generator还不熟悉,可以看看这篇文章...这种异步事件处理机制需要一个处理中心存储事件和处理函数,还需要一个方法触发队列中的事件的执行,再回看前面的使用的API,我们发现了两个类似功能的API: takeEvery(action, callback...首先需要在中间件里面Redux的getState和dispatch等参数传递进去,Redux-Saga使用的是bind函数,所以中间件方法改造如下: function sagaMiddleware({

    1.7K30

    高级前端react面试题总结

    调和阶段 setState内部干了什么当调用 setState 时,React会做的第一件事情是传递给 setState 的对象合并到组件的当前状态这将启动一个称为和解(reconciliation)...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件,用于代替 redux-thunk 的。...redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js component.js 中action摆脱thunk

    4.1K40

    每日两题 T35

    redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的 library,它的目标是让副作用管理更容易,执行更高效,测试更简单...redux-saga 是一个 redux 中间件,意味着这个线程可以通过正常的 redux action 从主应用程序启动,暂停和取消,它能访问完整的 redux state,也可以 dispatch...redux-saga 使用了 ES6 的 Generator 功能,让异步的流程更易于读取,写入和测试。...你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态的值,比较灵活,易于控制 •redux-promise的优点是

    77030

    前端react面试题(必备)2

    redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js component.js 中action摆脱thunk...⽤灵活: redux-saga可以多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:...⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import

    2.3K20

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

    redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js component.js 中 action摆脱thunk...⽤ 灵活: redux-saga可以多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等 redux-saga...Redux 中间件什么?接受几个参数?柯里化函数两端的参数具体是什么

    2K00

    前端高频react面试题

    redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js component.js 中action摆脱thunk...⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import...在使用 React Router时,如何获取当前页面的路由浏览器中地址栏中的地址?

    3.3K20

    美团前端react面试题汇总

    redux异步中间件其实有很多,当下主流的异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js component.js 中action摆脱thunk...⽤灵活: redux-saga可以多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:...⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import

    5.1K30
    领券