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

如何在redux saga中使用异步等待?

在Redux Saga中使用异步等待的方法是通过使用Effect函数来实现。Effect函数是一个Generator函数,它可以被Redux Saga中间件执行。下面是在Redux Saga中使用异步等待的步骤:

  1. 导入所需的Effect函数和其他必要的依赖:
代码语言:txt
复制
import { put, call, takeEvery } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from '../actions';
import { fetchDataApi } from '../api';
  1. 创建一个Worker Saga函数,用于处理异步操作:
代码语言:txt
复制
function* fetchDataSaga(action) {
  try {
    // 发起异步请求
    const data = yield call(fetchDataApi, action.payload);
    // 请求成功时,触发一个成功的Action
    yield put(fetchDataSuccess(data));
  } catch (error) {
    // 请求失败时,触发一个失败的Action
    yield put(fetchDataFailure(error));
  }
}
  1. 创建一个Watcher Saga函数,用于监听特定的Action,并在其被触发时调用Worker Saga函数:
代码语言:txt
复制
function* watchFetchData() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
}
  1. 在Redux Store的初始化过程中,使用Redux Saga中间件来运行Watcher Saga函数:
代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { watchFetchData } from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(watchFetchData);

在上述代码中,fetchDataSaga是一个Worker Saga函数,它使用call Effect函数来发起异步请求,并使用put Effect函数来触发成功或失败的Action。watchFetchData是一个Watcher Saga函数,它使用takeEvery Effect函数来监听特定的Action,并在其被触发时调用fetchDataSaga

这样,在Redux中使用Redux Saga进行异步等待的过程就完成了。你可以根据具体的业务需求,调整和扩展这些代码。

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

相关·内容

Redux:从action到saga

但是当需要处理异步的action(在函数式编程里称为副作用)的时候事情就没有这么简单了。为了解决这个问题,redux建议使用中间件(尤其是thunk)。...基本上,如果你需要出发副作用(side effects),使用一种特定的action生成方法:一种返回一个方法的方法,可以实现任意的异步访问并分发任意你想要的action。...使用这个方式会很快导致action生成方法变得复杂并难以测试。这个时候就需要redux-saga了。在redux-sagasaga就是一个可声明的组织良好的副作用实现方式(超时,API调用等等。。)...在上面的例子我用了两种副作用: 一个put副作用,它会给redux store分发一个action。 一个call副作用,它会执行一个异步的方法(promise,cps后者其他的saga)。...所以,我们来看看如何在redux应用里添加saga

1.2K00
  • 前端实现异步的几种方式_redux是什么

    redux-saga是一个Redux中间件,用来帮你管理程序的副作用。或者更直接一点,主要是用来处理异步action。...redux-saga的功能也是一样的,参见下图: 左边的蓝圈圈里就是一堆saga,它们需要和外部进行异步I/O交互,等交互完成后再修改Store的状态数据。...redux-saga就是一个帮你管理这堆saga的管家,那么它跟其他的中间件实现有什么不同呢?它使用了ES6Generator函数语法。...select:获取Store的数据 put:向Store发送action take:在Store上等待指定action fork:和call类似,但是是非阻塞的,立即返回 比如我们之前用到的...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.7K30

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

    组件从 store 取数据,当交互的时候去通知 store 改变对应的数据。...异步过程的管理 很多情况下改变 store 数据都是一个异步的过程,比如等待网络请求返回数据、定时改变数据、等待某个事件来改变数据等,那这些异步过程的代码放在哪里呢? 组件?...redux-saga redux-saga 并没有改变 action,它会把 action 透传给 store,只是多加了一条异步过程的处理。...redux-thunk 并没有提供多个异步过程管理的机制,复杂异步过程的管理还是得用 redux-saga 或者 redux-observable。...redux-saga 透传了 action 到 store,并且监听 action 执行相应的异步过程。异步过程的描述使用 generator 的形式,好处是可测试性。

    2.5K10

    React saga_react获取子组件ref

    redux-saga简介 Redux-sagaRedux的一个中间件,主要集中处理react架构异步处理工作,被定义为generator(ES6)的形式,采用监听的形式进行工作。...是控制执行的generator,在redux-sagaaction是原始的js对象,把所有的异步副作用操作放在了saga函数里面。...3.redux-saga使用技术细节 redux-saga除了上述的action统一、可以集中处理异步操作等优点外,redux-saga使用声明式的Effect以及提供了更加细腻的控制流。...call方法应用很广泛,在redux-saga使用异步请求等常用call方法来实现。...5.总结 通过上述章节,我们可以概括出redux-saga做为redux中间件的全部优点: 统一action的形式,在redux-saga,从UIdispatch的action为原始对象 集中处理异步等存在副作用的逻辑

    4.5K30

    美团前端react面试题汇总

    但是在⼀定规模的项⽬,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流的异步中间件有两种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

    2022社招react面试题 附答案

    由于JavaScript异步事件的性质,当您启动API调⽤时,浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时,它不会等待componentWillMount它完成任何事情。...通过使用React Profiler,可以在使用这些方法前后对性能进行测量,从而确保通过进行给定的更改来实际改进性能。 8、讲下redux的⼯作流程?...redux适合有回溯需求的应⽤:⽐⼀个画板应⽤、⼀个表格应⽤,很多时候需要撤销、重做等操作,由于redux不可变的特性,天然⽀持这些操作。...当然mobx和redux也并不⼀定是⾮此即彼的关系,你也可以在项⽬redux作为全局状态管理,⽤mobx作为组件局部状态管理器来⽤。 10、redux异步中间件之间的优劣?...redux-saga优点: 异步解耦:异步操作被被转移到单独saga.js,不再是掺杂在action.js或component.js; action摆脱thunk function: dispatch

    2.1K10

    redux-saga

    作为一个Redux中间件,想让Redux应用的副作用(即依赖/影响外部环境的不纯的部分)处理起来更优雅 二.设计理念 Saga像个独立线程一样,专门负责处理副作用,多个Saga可以串行/并行组合起来,...on the Saga concept 三.核心实现 利用generator,让异步流程控制易读、优雅、易测试 In redux-saga, Sagas are implemented using Generator...所以添一层描述对象来解决这个问题,测试case可以简单比较描述对象,实际起作用的Promise由redux-saga内部生成 这样做的好处是单测不用mock异步方法(一般单测中会把所有异步方法替换掉...),这不很过分 注意,不需要mock异步函数只是简化了单元测试的一个环节,即便使用这种对比描述对象的方式,仍然需要提供预期的数据,例如: // 测试场景直接执行 const iterator = fetchProducts...task与当前saga有关 fork所在的saga等待forked task,只有在所有forked task都执行结束后,当前saga才会结束 fork的执行机制与all完全一致,包括cancel和

    1.9K41

    每日两题 T35

    redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的 library,它的目标是让副作用管理更容易,执行更高效,测试更简单...redux-saga 使用了 ES6 的 Generator 功能,让异步的流程更易于读取,写入和测试。...你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态的值,比较灵活,易于控制 •redux-promise的优点是...api层与store解耦,缺点是对请求失败,请求的情形没有很好的处理 •redux-saga 的优点是api层与store解耦,对请求,请求失败都有完善的处理,缺点是代码量较大 References

    77030

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

    Redux 搭配 React 使用 安装: npm install --save react-redux 3.1. react-redux在React使用方式   · 在react入口文件中注入...( applyMiddleware(     // 这里可以放一些中间件, redux-saga 等 ) ) ) export default store   create-action.js...当我们需要执行一些异步操作时,由于action只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga是常见的两种中间件。   ...redux-thunk 主要是使action能够返回一个函数而达到目的,这样导致了action函数变得复杂   redux-saga 可以将异步操作单独分离出来封装到某些模块,这样保证action函数更加干净...的配置和使用,在componentdispatch getUserInfoAction这个action,就会执行 getUserInfoSaga 函数,这样就完成了异步的拓展。

    54830

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

    在实际项目中,一般都会有同步和异步操作,所以 Flux、Redux 之类的思想,最终都要落地到同步异步的处理来。...redux-saga 采用了另外一种思路,它没有把异步操作放在 action creator ,也没有去处理 reductor,而是把所有的异步操作看成“线程”,可以通过普通的action去触发它,当操作完成时也会触发...举个例子: // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...saga 还能很方便的并行执行异步任务,或者让两个异步任务竞争: // 并行执行,并等待所有的结果,类似 Promise.all 的行为 const [users, repos] = yield [...异步数据获取的相关业务逻辑放在了单独的 saga.js ,不再是掺杂在 action.js 或 component.js

    5.5K10

    React + Redux 最佳实践

    五、Action Store,业务逻辑处理 需求 统一处理业务逻辑,尤其是异步的处理。 方案 redux-saga: 用于管理 action,处理异步逻辑。可测试、可 mock、声明式的指令。...可选 redux-loop: 适用于相对简单点的场景,可以组合异步和同步的 action 。...redux-thunk, redux-promise 等: 相对原始的异步方案,适用于更简单的场景。在 action 需要组合、取消等操作时,会不好处理。...,不再散落在各处 全同步执行,就算逻辑再复杂,看起来也不会乱 六、Data API Server 需求 异步请求。...方案 isomorphic-fetch: 便于在同构应用中使用,另外同时要写 node 和 web 的同学可以用一个库,学一套 api 。 然后通过 async + await 组织代码。

    1.5K50

    一天梳理完react面试高频题

    这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...redux异步流中间件其实有很多,当下主流的异步中间件有两种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

    4.1K20

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

    在实际项目中,一般都会有同步和异步操作,所以 Flux、Redux 之类的思想,最终都要落地到同步异步的处理来。...redux-saga 采用了另外一种思路,它没有把异步操作放在 action creator ,也没有去处理 reductor,而是把所有的异步操作看成“线程”,可以通过普通的action去触发它,当操作完成时也会触发...举个例子: // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...saga 还能很方便的并行执行异步任务,或者让两个异步任务竞争: // 并行执行,并等待所有的结果,类似 Promise.all 的行为 const [users, repos] = yield [...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取的相关业务逻辑放在了单独的 saga.js ,不再是掺杂在 action.js 或 component.js

    5.2K20

    手写Redux-Saga源码

    本文要讲的就是Redux-Saga,这个也是我在实际工作中使用最多的Redux异步解决方案。...Redux-SagaRedux-Thunk复杂得多,而且他整个异步流程都使用Generator来处理,Generator也是我们这篇文章的前置知识,如果你对Generator还不熟悉,可以看看这篇文章...前面我们说过了,Redux-Saga很可能是自己实现了一套完全独立的异步事件处理机制。...这种异步事件处理机制需要一个处理中心来存储事件和处理函数,还需要一个方法来触发队列的事件的执行,再回看前面的使用的API,我们发现了两个类似功能的API: takeEvery(action, callback...Redux-Saga这块代码是单独抽取了一个文件,我们仿照这种做法吧。

    1.7K30

    redux-saga

    这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,激活的路由,被选中的标签,是否显示加载动效或者分页器等等。...一些库 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是,React 依旧把处理 state 数据的问题留给了你。Redux 就是为了帮你解决这个问题。...因此我们首先得学习Redux,中文官网地址:http://cn.redux.js.org/ 此时我们可以很好的在大型项目中管理我们的state了,但如果我们要异步获取数据、访问浏览器缓存等操作,就需要用到...Redux-Saga 官网地址(英文):https://redux-saga.js.org/ 中文文档地址:https://redux-saga-in-chinese.js.org/ 我简单进行入门了一下...,编写了一个redux-saga的getting start demo https://gitee.com/VampireAchao/simple-redux-saga.git 注释都写得比较完善 运行方式

    54110

    高频React面试题及详解

    redux-saga,当然redux- observable可能也有资格占据一席之地,其余的异步中间件不管是社区活跃度还是npm下载量都比较差了. redux异步中间件之间的优劣?...功能孱弱: 有一些实际开发中常用的功能需要自己进行封装 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js ,不再是掺杂在 action.js 或 component.js...function 的 saga 实现,代码异常/请求失败 都可以直接通过 try/catch 语法直接捕获处理 功能强大: redux-saga提供了大量的Saga 辅助函数和Effect 创建器供开发者使用...,开发者无须封装或者简单封装即可使用 灵活: redux-saga可以将多个Saga可以串行/并行组合起来,形成一个非常实用的异步flow 易测试,提供了各种case的测试方案,包括mock task,...分支覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的

    2.4K40

    redux-saga_pub culture

    所以,我们可以理解为Sage是一个可以用来处理复杂的异步逻辑的模块,并且由redux的action触发。...在最初的调研redux-thunk是首先考虑的,redux-thunk是在action作用到reducer之前触发一些业务操作。刚好起到控制层的作用。...call方法 call有些类似Javascript的call函数, 不同的是它可以接受一个返回promise的函数,使用生成器的方式来把异步变同步。...put方法 put就是redux的dispatch,用来触发reducer更新store 有什么弊端 目前在项目实践遇到的一些问题: redux-saga模型的理解和学习需要投入很多精力 因为需要用...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.4K10
    领券