开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

什么时候使用redux saga，什么时候使用redux thunk？

在云计算领域，使用Redux Saga和Redux Thunk是为了处理应用程序中的异步操作。它们都是用于管理应用程序状态的中间件，但在不同的情况下使用。

当应用程序需要处理复杂的异步操作时，使用Redux Saga是一个不错的选择。Redux Saga使用了ES6的Generator函数，可以通过使用yield关键字来简化异步操作的处理。它提供了一种优雅的方式来管理副作用，例如异步API调用、定时器和WebSocket连接等。Redux Saga还提供了丰富的API来处理并发操作、取消操作和错误处理等。它适用于需要更高级控制和复杂逻辑的场景。

另一方面，当应用程序的异步操作相对简单时，可以考虑使用Redux Thunk。Redux Thunk是一个简单的函数，它可以在Redux的action中进行异步操作。它允许我们在action中直接调用异步函数，并在异步操作完成后再派发相应的action。Redux Thunk适用于简单的异步操作，例如发送网络请求并更新状态。

总结起来，当应用程序需要处理复杂的异步操作、需要更高级的控制和复杂逻辑时，推荐使用Redux Saga。而当应用程序的异步操作相对简单时，可以考虑使用Redux Thunk。

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

腾讯云云原生产品：https://cloud.tencent.com/solution/cloud-native
腾讯云音视频处理产品：https://cloud.tencent.com/product/mps
腾讯云人工智能产品：https://cloud.tencent.com/solution/ai
腾讯云物联网产品：https://cloud.tencent.com/solution/iot
腾讯云移动开发产品：https://cloud.tencent.com/solution/mobile-development
腾讯云存储产品：https://cloud.tencent.com/product/cos
腾讯云区块链产品：https://cloud.tencent.com/solution/blockchain
腾讯云元宇宙产品：https://cloud.tencent.com/solution/metaverse

相关搜索:2021年我应该使用redux-saga还是redux-thunk？React导航v5:如何使用redux thunk/redux saga导航？Redux-Saga不等待使用redux-saga-firebase完成操作 Redux-Thunk到Redux-Saga 使用App类进行渲染的Redux thunk 使用Redux Saga从Redux Store获取和设置值使用redux thunk了解异步调度操作使用redux-persist和redux thunk 使用redux-saga- Test -plan测试redux-saga延迟量使用redux-saga中的InteractionManager

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

关于redux-saga中take使用方法

带来一个自己研究好久的API使用方法. redux-saga中effect中take这个API使用方式,用的多的是call,put,select,但take这个平常还真没什么机会用上,也不清楚在哪里使用才好...,不管怎么样,既然是redux-saga写出来的,肯定是有他的用法的,不管37 21,先学会使用方法再说....当在genetator中使用take语句等待action时，generator被阻塞，等待action被分发，然后继续往下执行。 takeEvery只是监听每个action，然后执行处理函数。

1.9K5 0

什么时候使用Dockerfiles（什么时候不使用……）

在这篇文章中，我们将讨论一些使用 Dockerfile 的最佳实践，探索一些注意事项，并使用 Dockerfile 和云原生 Buildpacks 构建应用。...你将了解每种工具最擅长的工作是什么，以及如何决定何时使用它们。 Dockerfiles 是什么？ Dockerfile 是一个包含命令的文本文件，Docker 将执行这些命令来构建一个容器镜像。...编写更好的 Dockerfile 我们开始使用 golang:1.16.5 作为我们的 Go 应用程序的基本镜像。...使用 scratch 镜像也节省了大量空间，因为我们实际上不需要 Go 工具或其他工具来运行编译后的程序。使用一个容器用于构建，另一个容器用于最终镜像，这称为多阶段构建。...pack 使用构建包来帮助你轻松创建可以在任何地方运行的 OCI 镜像。

1.7K2 0

Redux使用总结

内值唯一的方式下载及安装 yarn add redux -D yarn add react-redux -D 1.在项目内增加redux管理项目状态创建redux必备3文件(redux架构), store.js...创建store并导出 import { createStore } from 'redux' import reducers from '....使用combineReducers 合并小状态并导出 import { combineReducers } from 'redux' //创建测试临时状态，正式使用时删除从actions.js 获取到...在子组件内，使用store的状态值 3.1 引入connect函数 import { connect } from 'react-redux' 3.2 书写filter函数具体内容，并真正注入数据 //...不要使用Browser路由，因为这个是服务器记录信息的路由

7643 0

Redux入门到使用。

再次强调一下 Redux 应用只有一个单一的 store。基本原理 ?...基本使用安装 npm install --save react-redux npm install --save-dev redux-devtools 实例主要是理解观察者模式，以及结合原理图先理解...redux的action,reducer,store基本运作。...INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1 常规使用...} } export default connect( mapStateToProps, mapDispatchToProps )(BodyIndex) 组件中的操作(常规) 使用

8374 0

什么时候，使用Excel？

什么情景下，我会选用Excel而不使用PowerBI。 1.非数据分析需求作为世界上最流行的电子表格工具，Excel的很多应用可以是非数据分析需求。...如果仅是一张简单的销售数据表，而且你的需求只是一次性地分析销售总量，快速地生成一个普通的数据透视表就可以达到目标，我们没有必要使用PowerBI。 ?...5.编辑查询器 PowerBI是从Excel的BI插件衍生而来的，我们说使用PowerBI操作流畅性、稳定性、功能性都更胜一筹，这主要是针对PowerPivot建模和可视化两个模块来讲。...在没有体验差别的情况下，直接使用Excel无需切换不同的软件来操作。另外，Excel的编辑查询器操作完后可以很方便地生成一张查询后的Excel表输出，这往往也是数据清洗工作后需要的结果。 ?

2K2 0

使用redux做TODOLIST

store.js import { createStore, combineReducers } from 'redux'; import { reducer as todoReducer } from...const reducer = combineReducers({ todo: todoReducer, }) export default createStore(reducer); todolist/redux...data, 1) return [...State] default: return State } } export default reducer todolist/redux...todolist.jsx import React, { useRef } from 'react'; import { useSelector, useDispatch } from 'react-redux.../redux/todolist' import '.

1121 0

hook+react-redux让redux使用更简单

而对应的，它的社区也是非常活跃，因此，当我们希望在一个React项目中引入redux进行状态管理的话，我们只需要引入react-redux 下边的例子中，会引入redux-thunk让store支持异步更新...redux核心概念 store action reducer 实际上，在react-redux中我们只需要了解这三个概念即可使用redux，而实际上这些也不难理解。..."; import thunk from "redux-thunk"; import rootReducer from ".....(applyMiddleware(thunk)) ); export default store; action action是触发store中state更新的行为其实也非常好理解，我们还是先看看原本的...function Component(){ const [state0,setState0]=useState(0); setState0(1); } //错误做法 this.state0=1 而使用

7504 0

【Redux】：Redux 指北

Redux 是什么？ 2. Redux 有什么用？ 3. Redux 什么时候该用？ 4. Redux 准则？ 4.1. 状态管理 4.2. 不可变性 5. Redux 术语？ 5.1....These restrictions are reflected in the three principles of Redux. 3. Redux 什么时候该用？...使用 Redux 是个好的选择但是需要注意，如果用了 Redux，需要把应用的所有状态都存进去么？ NO....9.3. redux-thunk redux-thunk 中间件扩展了 redux 的 dispatch 功能，它允许你 dispatch 一个函数（即：thunk），异步逻辑就放在这个函数中处理；源码...action 的处理上更加细致 store.dispatch({type:"INC", payload: Promise}); redux-saga: redux-saga 是功能强大、复杂的异步中间件

1.5K4 0

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

如果不对状态进行有效的管理，状态在什么时候，由于什么原因，如何变化就会不受控制，就很难跟踪和测试了。如果没有经历过这方面的困扰，可以简单理解为会搞得很乱就对了。...比如 redux-thunk 或 redux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题的。...redux-saga redux-saga是一个Redux中间件，用来帮你管理程序的副作用。或者更直接一点，主要是用来处理异步action。...关于saga原理的，推举阅读《前端技术栈(三)：redux-saga，化异步为同步》什么是Saga？...redux-saga的优势 Redux 处理异步的中间件 redux-thunk 和 redux-promise，当然 redux 的异步中间件还有很多，他们可以处理大部分场景，这些中间件的思想基本上都是把异步请求部分放在了

3.6K4 0

什么时候使用 CAP？

然而，您还必须承认人的因素，并通过使用文化策略为所有相关人员提供便利。什么时候使用 CAP？最好使用CAP来为即将到来的变革做好准备，就像GE所做的那样。

3411 0

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

Redux-thunk thunk 比较简单，没有做太多的封装，把大部分自主权交给了用户： const createFetchDataAction = function(id) { return...redux-thunk 和 redux-promise 刚好就是代表这两个面。 redux-thunk 和 redux-promise 的具体使用就不介绍了，这里只聊一下大概的思路。...对比 Redux-thunk 比较一下 redux-thunk 和 redux-saga 的代码：和 redux-thunk 等其他异步中间件对比来说，redux-saga 主要有下面几个特点：...其实 redux-saga 是用一些学习的复杂度，换来了代码的高可维护性，还是很值得在项目中使用的。 Dva Dva是什么呢？...简单理解，就是让使用 react-redux 和 redux-saga 编写的代码组织起来更合理，维护起来更方便。

5.4K1 0

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

redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-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-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的

2K0 0

2022社招React面试题附答案

redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-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-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的

2K5 0

React saga_react获取子组件ref

redux-saga安装使用npm进行安装： npm install --save redux-saga 或者使用yarn: yarn add redux-saga redux-saga常用方法解释...---- 最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么...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.5K3 0

redux 使用 redux-persist 进行数据持久化

0 1 redux-persist的介绍在React项目中，我们会使用redux 来进行状态管理。redux和其它状态管理技术一样，刷新页面后，数据就会恢复成初始状态。如何让数据实现持久化呢？...今天给大家推荐redux的一个插件redux-persist。redux-persist会将redux的store中的数据自动缓存到浏览器的 localStorage 中，不再需要单独去存储了。...0 2 redux-persist的使用 1、store.js 文件中的变化首先，需要引入 persistStore, persistReducer import {persistStore, persistReducer.../redux/store/store' import {PersistGate} from 'redux-persist/lib/integration/react'; ReactDOM.render(...中的数据也不会丢失以上，就完成了使用redux-persist实现React持久化本地数据存储的简单应用

3.3K2 0

React：Redux源码分析

Web应用越来越复杂，需要管理的应用状态越来越多；应用的状态在什么时候，由于什么原因，如何变化已然不受控制；我们总是将两个难以理清的概念混淆在一起：变化和异步； ? Redux核心概念？.... ---- utils/actionTypes.js: 供Redux内部使用的2个Action常量定义； ---- applyMiddleware.js: Redux官方附带一个的Store增强器...，用于扩展、增强Store的dispatch函数功能（例：日志记录[redux-logger]、异步管理[redux-thunk、redux-promise、redux-saga]等...）; compoese.js...4.3. utils/actionTypes.js：定义了2个Redux内部使用的Action常量，用于在Redux初始化或替换Reducer时完成Store初值构建； ?.../reduxjs/redux-thunk https://github.com/evgenyrodionov/redux-logger ?

8562 0

React：Redux怎么处理异步？

redux-promise：基于Promise的异步处理； redux-promise-middleware：还是Promise； redux-saga：最优雅！最复杂！ ? ?...扫码查看示例源码 2. redux-saga redux: store.dispatch({type: "INC", payload:....}); redux-thunk: store.dispatch...({type:"INC", payload: Promise}); 注：redux-promise 允许我们 dispatch 一个 payload 为 Promise 的 action； redux-saga...: store.dispatch({type:"INC", payload:...}); 注：redux-saga 不会变动 action 的本来含义，action 仍然是一个普通的 JS 对象； redux-saga...总结： redux-saga是最优雅的，也是最复杂的异步中间件： a. 有强大的异步流程控制功能（例：takeEvery、takeLatest）； b.

2.6K3 0

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

Redux原理分析一、Reudx基本介绍 1.1、什么时候使用Redux？简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。...从简单的 react-thunk 到 redux-promise 再到 redux-saga等等，都代表这各自解决redux异步流管理问题的方案 4.1 、redux-thunk redux-thunk...尽管redux-thunk很简单，而且也很实用，但人总是有追求的，都追求着使用更加优雅的方法来实现redux异步流的控制，这就有了redux- promise。...redux-saga将react中的同步操作与异步操作区分开来，以便于后期的管理与维护，redux- saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action...一般项目redux-thunk就足以满足自身需求了。毕竟react- thunk对于一个项目本身而言，毫无侵入，使用极其简单，只需引入这个中间件就行了。

3.9K3 0

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

redux-thunk 和 redux-promise 刚好就是代表这两个面。 redux-thunk 和 redux-promise 的具体使用就不介绍了，这里只聊一下大概的思路。...这里不讨论更多 saga 的细节，大家了解 saga 的思想就行，细节请看文档。对比 Redux-thunk ? 比较一下 redux-thunk 和 redux-saga 的代码： ? ?...和 redux-thunk 等其他异步中间件对比来说，redux-saga 主要有下面几个特点：异步数据获取的相关业务逻辑放在了单独的 saga.js 中，不再是掺杂在 action.js 或 component.js...其实 redux-saga 是用一些学习的复杂度，换来了代码的高可维护性，还是很值得在项目中使用的。 Dva Dva是什么呢？...简单理解，就是让使用 react-redux 和 redux-saga 编写的代码组织起来更合理，维护起来更方便。

5.2K2 0

一天梳理完react面试题

redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-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-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与

5.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭