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

我需要像redux-thunk或saga这样的中间件吗?Angular-redux

Redux-thunk和Redux-saga是两种常用的Redux中间件,用于处理异步操作和副作用。

  1. Redux-thunk是Redux的默认中间件,它允许在Redux的action中返回一个函数而不是一个普通的action对象。这个函数可以进行异步操作,例如发起网络请求或延迟执行某个操作。Redux-thunk的优势在于简单易用,适合处理简单的异步逻辑。它的应用场景包括但不限于:异步数据获取、延迟加载、条件触发等。腾讯云相关产品中,可以使用云函数 SCF(Serverless Cloud Function)来处理异步操作,详情请参考:腾讯云云函数 SCF
  2. Redux-saga是一个强大的Redux中间件,它使用了ES6的Generator函数来处理异步操作和副作用。Redux-saga提供了一种更灵活、可控的方式来管理异步流程,例如处理复杂的异步操作、并发请求、轮询等。它的优势在于可以编写可测试、可维护的异步逻辑,并且提供了丰富的API来处理各种场景。Redux-saga的应用场景包括但不限于:复杂的异步操作、并发请求、WebSocket通信、轮询等。腾讯云相关产品中,可以使用云函数 SCF(Serverless Cloud Function)结合云数据库 CDB(Cloud Database)来处理复杂的异步逻辑,详情请参考:腾讯云云函数 SCF腾讯云云数据库 CDB

总结:是否需要像redux-thunk或saga这样的中间件取决于你的项目需求和复杂度。如果你的异步逻辑相对简单,可以选择使用redux-thunk来处理;如果你的异步逻辑较为复杂,需要更高级的控制和管理,可以选择使用redux-saga。腾讯云提供了云函数 SCF 和云数据库 CDB 等产品来支持异步操作和数据存储,可以根据具体需求选择适合的产品。

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

相关·内容

redux-thunk

一、redux-thunk介绍 redux-thunk用于处理异步action,同类型有redux-saga 二、学习网址 https://github.com/reduxjs/redux-thunk.../reducers'; // 创建store时候,第二个参数是中间件redux-thunk提供了一个thunk中间件,用于处理异步action export default createStore...( rootReducer, applyMiddleware(thunk) ); //异步action, 由于使用了redux-thunkthunk中间件, //所以,在这个action里不用同步...(num = 1) => { return (dispatch) => { // 当这个方法刚进来时候,就马上告诉reducer,要开始获取数据了, // reducer接收到这个动作...来模拟获取数据 setTimeout(() => { // 获取数据完成之后,需要dispatch两个action. // 一个是把获取到数据,传到一个动作里(ADD)

58441

造一个 redux-thunk 轮子

redux-thunk 不就是那个只有 14 行代码轮子嘛?一行就能写出来还要你来教我做事? 不错,redux-thunk 是一个非常小库,不到 5 分钟就能理解并造出来。...不过,觉得这是从结果出发找造这个轮子原因,并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望从解决问题角度来推导 redux-thunk 诞生原因。...解耦 上面的代码在很多业务里非常常见,常见到我们根本不需要什么 redux-thunk,redux-saga 来处理。...函数 发现直接赋值是个很笨行为,比较高级是使用中间件来改写 dispatch 函数 最后,我们做了一个中间件出来,就叫做 redux-thunk 总结 最后来回答一些在 redux 社区里看到一些问题...需要注意是,redux-thunk 和后面两者其实并不是一个等级库,后面两都除了提供 pattern “翻译” 功能之外还有很多如 error handling 这样特性,这里不展开说了。

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

    没有,这段逻辑依然是在组件里写,只不过移到了 dispatch 里,也没有提供多个异步过程管理机制。 解决这个问题,需要用 redux-saga redux-observable 中间件。...redux-saga 中间件这样启用: import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware...然后 task 会调用不同实现函数来执行该 worker saga。 为什么要这样设计呢?直接执行不就行了,为啥要拆成 worker saga 和 task 两部分,这样理解成本不就高了么?...那么具体怎么执行就可以随意切换了,这样测试时候只需要模拟传入对应数据,就可以测试 worker saga 了。...redux 中间件就是对 dispatch 层层包装,比如 redux-thunk 就是判断了下 action 是 function 就执行下,否则就是继续 dispatch。

    2.5K10

    React-Redux-Saga

    Redux-saga 简介redux-sagaredux-thunk 一样, 是一个 Redux 中获取存储异步数据中间件redux-saga 可以直接拦截 dispatch 派发 action...中间件,更改 store.jsimport {createStore, applyMiddleware} from 'redux'/*注意点: 如果导入redux-thunk, 那么返回给我们是一个中间件对象...来保存状态(state)const store = createStore(reducer, storeEnhancer);/*注意点: 如果是redux-thunk, 那么在创建store时候指定完中间件即可...如果是redux-saga, 那么除了需要在创建store时候指定中间件以外, 还需要手动调用中间件run方法才行* */sagaMiddleware.run(undefined,...action 需要进行拦截, 在 run 方法进行指定:图片在组件中派发 action 这回我们派发 action 就不用 thunk 一样派发一个函数了图片图片除了通过 takeEvery 来拦截派发

    20730

    每日两题 T35

    看过dva源码? redux redux是 JavaScript 状态容器,提供可预测化状态管理。 应用中所有的 state 都以一个对象树形式储存在一个单一 store 中。...redux-saga 是一个 redux 中间件,意味着这个线程可以通过正常 redux action 从主应用程序启动,暂停和取消,它能访问完整 redux state,也可以 dispatch...(如果你还不熟悉的话,这里有一些介绍性链接) 通过这样方式,这些异步流程看起来就像是标准同步 Javascript 代码。...(有点 async/await,但 Generator 还有一些更棒而且我们也需要功能)。 你可能已经用了 redux-thunk 来处理数据读取。...redux-saga与其他redux中间件比较 •redux-thunk 缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态值,比较灵活,易于控制 •redux-promise优点是

    77530

    美团前端react面试题汇总

    redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊redux-saga或者...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...state,相反他们只能表达想要修改意图使用纯函数来执行修改state为了描述action如何改变state tree 需要编写reduceReact 数据持久化有什么实践?...,提高编码效率redux缺点: 当数据更新是有时候组件不需要,也要重新绘制,影响效率refs 是什么refs是react中引用简写,有主语存储特定 React 元素组件引用属性,它将由组件渲染配置函数返回当我们需要输入框内容

    5.1K30

    React saga_react获取子组件ref

    大家好,又见面了,是你们朋友全栈君。...---- 最近将项目中redux中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga使用心得,阅读本文需要了解什么是redux,redux中间件用处是什么...在有副作用action和原始action之间增加中间件处理,从图中我们也可以看出,中间件作用就是: 转换异步操作,生成原始action,这样,reducer函数就能处理相应action,从而改变...这样既统一了action形式,又使得异步操作集中可以被集中处理。 redux-saga是通过genetator实现,如果不支持generator需要通过插件babel-polyfill转义。...yield call(fetch,'/userInfo',username) put 在前面提到,redux-saga做为中间件,工作流是这样: UI——>action1————>redux-saga

    4.5K30

    前端react面试题(必备)2

    redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊redux-saga或者...redux-observable额外范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质耦合严重: 异步操作与redux...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...这样 React在更新DOM时就不需要考虑如何处理附着在DOM上事件监听器,最终达到优化性能目的。

    2.3K20

    一天梳理完react面试高频题

    redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊redux-saga或者...redux-observable额外范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质耦合严重: 异步操作与redux...action偶合在⼀起,不⽅便管理功能孱弱: 有⼀些实际开发中常⽤功能需要⾃⼰进⾏封装使用步骤:配置中间件,在store创建中配置import {createStore, applyMiddleware...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

    4.1K20

    高级前端react面试题总结

    通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需在绝对必要情况下进行更新即可最小化 UI 占用空间React Hooks在平时开发中需要注意问题和原因(1)不要在循环...,条件嵌套函数中调用Hook,必须始终在 React函数顶层使用Hook这是因为React需要利用调用顺序来正确更新相应状态,以及调用相应钩子函数。...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作中间件,用于代替 redux-thunk 。...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊redux-saga或者

    4.1K40

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

    这样方式不仅仅减少了内存消耗,还能在组件挂在销毁时统一订阅和移除事件。...浅比较会忽略属性和状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变时候render是不会执行。如果需要重新渲染那么就需要重新开辟空间引用数据。...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

    2K00

    redux-saga_pub culture

    大家好,又见面了,是你们朋友全栈君。 本文用以记录从调研Redux Saga,到应用到项目中一些收获。...在最初调研中redux-thunk是首先考虑redux-thunk是在action作用到reducer之前触发一些业务操作。刚好起到控制层作用。...下面是一个简单例子: 在用户提交表单时候,我们想要做如下事情: 校验一些输入信息 (简单, 写在组件里) 弹起提示信息(聪明,一定要写一个公用提示信息模块,这样别的页面引入就可以用了, 呵呵呵呵...在重用方面,解耦显示层和业务层之后, 代码重用度也得到了提升。 选择Saga原因 开始时候一直在犹豫是否需要使用Sagathunk,因为并不能很好把握这两者到底解决了什么问题。...这句话使决定了尝试用sagathunk来实践把前端分层设想。

    1.4K10

    一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

    作用大概就是这样,根据应用状态和当前 action 推导出新 state: (previousState, action) => newState 类比 Flux,Flux 有些: (state...显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成支持异步处理中间件。比如 redux-thunk redux-promise 。...刚才介绍了两个Redux 处理异步中间件 redux-thunk 和 redux-promise,当然 redux 异步中间件还有很多,他们可以处理大部分场景,这些中间件思想基本上都是把异步请求部分放在了...对比 Redux-thunk 比较一下 redux-thunk 和 redux-saga 代码: 和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:...如果项目比较小的话,使用 MobX 会比较灵活,但是大型项目, MobX 这样没有约束,没有最佳实践方式,会造成代码很难维护,各有利弊。

    5.5K10

    前端高频react面试题

    React Hooks 限制主要有两条:不要在循环、条件嵌套函数中调用 Hook;在 React 函数组件中调用 Hook。那为什么会有这样限制呢?...这样好处是,可以将数据请求放在这里进行执行,需要参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊redux-saga或者...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

    3.4K20

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

    redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊redux-saga...或者redux-observable额外范式,上⼿简单 redux-thunk缺陷: 样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质 耦合严重: 异步操作与redux...时,该action函数体会自动执行 store.dispatch(action) } (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...this.state.val} onChange={this.handleChange}/> {this.state.val} ) } } 非受控也就意味着可以不需要设置它

    2.8K20

    React之redux学习日志(reduxreact-reduxredux-saga

    当我们需要执行一些异步操作时,由于action中只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga是常见两种中间件。   ...redux-thunk 主要是使action能够返回一个函数而达到目的,这样导致了action函数变得复杂   redux-saga 可以将异步操作单独分离出来封装到某些模块,这样保证action函数更加干净...redux-saga配置和使用,在component中dispatch getUserInfoAction这个action,就会执行 getUserInfoSaga 函数,这样就完成了异步拓展。   ...' // 以下saga个人项目中使用到 import headNavigationBarSagas from '@/commponents/HeadNavigationBar/store/sagas...redux-saga中间件使用,若有错误请各路大佬指出加以改正和学习 智者说话,是因为他们有话要说;愚者说话,则是因为他们想说。

    55130

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

    显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成支持异步处理中间件。比如 redux-thunk redux-promise 。...刚才介绍了两个Redux 处理异步中间件 redux-thunk 和 redux-promise,当然 redux 异步中间件还有很多,他们可以处理大部分场景,这些中间件思想基本上都是把异步请求部分放在了...比较一下 redux-thunk 和 redux-saga 代码: ? ?...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取相关业务逻辑放在了单独 saga.js 中,不再是掺杂在 action.js component.js...如果项目比较小的话,使用 MobX 会比较灵活,但是大型项目, MobX 这样没有约束,没有最佳实践方式,会造成代码很难维护,各有利弊。

    5.3K20

    单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

    比如 redux-thunk redux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题。...redux-saga redux-saga是一个Redux中间件,用来帮你管理程序副作用。或者更直接一点,主要是用来处理异步action。...redux-saga优势 Redux 处理异步中间件 redux-thunk 和 redux-promise,当然 redux 异步中间件还有很多,他们可以处理大部分场景,这些中间件思想基本上都是把异步请求部分放在了...这样看来认为VUE是更推荐在使用了VUEX框架中每个组件内部都使用store,而React-Redux则提供了自由选择性。...而VUEX即不需要使用外层组件,也不需要类似connect方式将组件做一次包装,认为出发点应该是可能是为了避免啰嗦。

    3.7K40
    领券