如何使用redux saga等待动作和API调用完成？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

redux-saga学习

，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 ) redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects...放到 race 方法里以自动取消 redux-saga 使用了 ES6 的 Generator 功能，让异步的流程更易于读取，写入和测试。.../sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。...Effect 是使用 redux-saga 提供的工厂函数创建的。...阻塞调用/非阻塞调用阻塞调用的意思是，Saga 在 yield Effect 之后会等待其执行结果返回，结果返回后才会恢复执行 Generator 中的下一个指令。

3.4K1 0

React saga_react获取子组件ref

redux-saga安装使用npm进行安装： npm install --save redux-saga 或者使用yarn: yarn add redux-saga redux-saga常用方法解释...如何处理副作用操作，在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用。...和调用redux的其他中间件一样，如果想使用redux-saga中间件，那么只要在applyMiddleware中调用一个createSagaMiddleware的实例。...首先，在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。...用框图可以更清楚的分析： call方法调用阻塞主线程的具体效果如下动图所示：白屏时为请求列表的等待时间，在此时，我们点击登出按钮，无法响应登出功能，直到请求列表成功，展示列表信息后，点击登出按钮才有相应的登出功能

5.4K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

2022社招react面试题附答案

由于JavaScript中异步事件的性质，当您启动API调⽤时，浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时，它不会等待componentWillMount它完成任何事情。...所有的jsx最终都会被转换成React.createElement的函数调用。...7、如何避免组件的重新渲染？ React中最常见的问题之一是组件不必要地重新渲染。...通过使用React Profiler，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。 8、讲下redux的⼯作流程？...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的

2.9K1 0

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

那么问题来了，为了保证数据的一致性，我们是不是应该等待刚才那个LLT执行完成呢？这显然不现实，因为这意味着在这30分钟内，其他人都没办法订票了。。。...redux-saga的功能也是一样的，参见下图：左边的蓝圈圈里就是一堆saga，它们需要和外部进行异步I/O交互，等交互完成后再修改Store中的状态数据。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...redux-saga提供的API函数takeEvery()，当有接收到USER_FETCH_REQUESTED action时，会启动worker saga。...借用网上的一张神图来更直观地理解上面这些API的作用：另外，如果你想要同时监听不同的action，可以使用all()或者race()把他们组合成一个root saga： export default

2.2K3 0

redux-saga入门

文章目录资料 redux-saga简介常用API takeLatest takeEvery take delay put call fork cancel all 案例1：错误处理了案例2：错误未处理...Effects是一些简单对象，如下put({ type: ‘increment’ })，我们使用redux-saga提供的put方法创建一个Effect对象。...，因为call方法是阻塞的，所以当前Generator会等待loginOut的完成。...创建一个Effect，命令中间件并行地运行多个Effect，并等待他们全部完成，其中分为两种情况： all中任务全部完成，则all所在Generator恢复执行。.../非阻塞调用阻塞调用的意思是saga在yield Effect之后会等待其结果返回，结果返回后才会继续执行saga中下一个指令。

1.8K2 0

Redux 异步解决方案2. Redux-Saga中间件

否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用安装: yarn add redux-saga store.js import { createStore...from 'redux-saga'; // 导入创建saga的函数 import {add, deleter} from '....sagaMiddleware.run(watch); Saga/saga.js import { call, // 调用一个函数 put, take, select,...saga常用API takeEvery("actionType", generator)....call函数页数阻塞effect select 解释: select函数是用来指示middleware调用提供的选择器获取Store上的state 类似于redux: store.getState()

1.3K2 0

Redux：从action到saga

前端应用消失的部分一个现代的、使用了redux的前端应用架构可以这样描述：一个存储了应用不可变状态（state）的store 状态（state）可以被绘制在组件里（html或者其他的东西）。...为了解决这个问题，redux建议使用中间件（尤其是thunk）。...使用这个方式会很快导致action生成方法变得复杂并难以测试。这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式（超时，API调用等等。。）...我们来看看如何写一个action creator来获取后端数据并分发到redux store。...所以，我们来看看如何在redux应用里添加saga。

1.5K0 0

redux-saga

[Effect1, Effect2]转换为并行调用类似于装箱（把业务操作用Effect包起来）拆箱（执行Effect里的业务操作），此外，完整的redux-saga还要实现：作为middleware...常用的Effect creator如下：阻塞型方法调用：call/apply 详见Declarative Effects 非阻塞型方法调用：fork/spawn 详见redux-saga’s fork...(rootSaga)类似通过fork执行的task与当前saga有关 fork所在的saga会等待forked task，只有在所有forked task都执行结束后，当前saga才会结束 fork的执行机制与...all完全一致，包括cancel和error的传递方式，所以如果任一task有未捕获的error，当前saga也会结束另外，cancel机制比较有意思：对于执行中的task序列，所有task自然完成时...: Composition Patterns In Redux-Saga API Reference Reference 6: A Saga on Sagas

2.4K4 1

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

举个例子： // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...也就是相当于take、put、call、put 这几个方法的调用变成了同步的，上面的全部完成返回了，才会执行下面的，类似于 await。...用了 saga，我们就可以很细粒度的控制各个副作用每一部的操作，可以把异步操作和同步发起 action 一起，随便的排列组合。...简单理解，就是让使用 react-redux 和 redux-saga 编写的代码组织起来更合理，维护起来更方便。...，那么只要 obj.a 属性一变，所有使用的地方都会被调用。

6.1K1 0

手写Redux-Saga源码

本文要讲的就是Redux-Saga，这个也是我在实际工作中使用最多的Redux异步解决方案。...然后看看fetchUserInfo函数，这个函数也不复杂，就是调用一个API函数fetchUserInfoAPI去获取数据，注意我们这里函数调用并不是直接的fetchUserInfoAPI()，而是使用了...到这里其实中间件部分就已经完成了，后面的代码就是具体的执行过程了。...fork的使用跟call很像，也是可以直接调用传进来的方法，只是call会等待结果回来才进行下一步，fork不会阻塞这个过程，而是当前结果没回来也会直接运行下一步： fork(fn, ...args);...cb，不需要等待proc的结果 } 复制代码 runPutEffect 我们前面的例子还用到了put这个effect，他就更简单了，只是发出一个action，事实上他也是调用的Redux的dispatch

2.1K3 0

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

举个例子： // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...也就是相当于take、put、call、put 这几个方法的调用变成了同步的，上面的全部完成返回了，才会执行下面的，类似于 await。...用了 saga，我们就可以很细粒度的控制各个副作用每一部的操作，可以把异步操作和同步发起 action 一起，随便的排列组合。...简单理解，就是让使用 react-redux 和 redux-saga 编写的代码组织起来更合理，维护起来更方便。...，那么只要 obj.a 属性一变，所有使用的地方都会被调用。

5.8K2 0

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

异步过程的管理很多情况下改变 store 数据都是一个异步的过程，比如等待网络请求返回数据、定时改变数据、等待某个事件来改变数据等，那这些异步过程的代码放在哪里呢？组件？...run 把 saga 的 watcher saga 跑起来： watcher saga 里面监听了一些 action，然后调用 worker saga 来处理： import { all, takeLatest...redux saga 的异步过程管理就是这样的：先把 action 透传给 store，然后判断 action 是否是被 taker 监听的，如果是，则调用对应的 worker saga 进行处理。...然后 task 会调用不同的实现函数来执行该 worker saga。为什么要这样设计呢？直接执行不就行了，为啥要拆成 worker saga 和 task 两部分，这样理解成本不就高了么？...redux-saga 透传了 action 到 store，并且监听 action 执行相应的异步过程。异步过程的描述使用 generator 的形式，好处是可测试性。

2.9K1 0

前端高频react面试题

当调用setState时，React render 是如何工作的？咱们可以将"render"分为两个步骤：虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。...如何解决 props 层级过深的问题使用Context API：提供一种组件之间的状态共享，而不必通过显式组件树逐层传递props；使用Redux等状态库。React Hook 的使用限制有哪些？...（1）使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与...在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？

4.6K2 0

高频React面试题及详解

由于JavaScript中异步事件的性质，当您启动API调用时，浏览器会在此期间返回执行其他工作。...当React渲染一个组件时，它不会等待componentWillMount它完成任何事情 React继续前进并继续render,没有办法“暂停”渲染以等待数据到达。...redux-thunk优点: 体积小: redux-thunk的实现方式很简单,只有不到20行代码使用简单: redux-thunk没有引入像redux-saga或者redux-observable额外的范式...实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强大: redux-saga提供了大量的Saga 辅助函数和Effect 创建器供开发者使用,开发者无须封装或者简单封装即可使用...: 额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的

3.4K4 0

美团前端react面试题汇总

另外，浏览器爬虫不会等待我们的数据完成之后再去抓取页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。...就是服务端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面。...（1）使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与...action，action是一个用于描述已经发生时间的对象，这个保证了视图和网络请求都不能直接修改state，相反他们只能表达想要修改的意图使用纯函数来执行修改state为了描述action如何改变state

6.2K3 0

Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）

云函数：可以用 Node.js 进行开发，自己编写对应的后端逻辑，并把写好的代码传到云端，然后在小程序前端使用 API 进行调用。...敬请期待哦✌️~ 实战 Redux 异步工作流安装我们使用 redux-saga 这个中间件来接管 Redux 异步工作流的处理异步请求部分，首先在项目根目录下安装 redux-saga 包： $...在 try 语句中，首先是使用了 redux-saga 提供给我们的 effects helper 函数：call 来调用登录的 API：userApi.login，并把 userInfo 作为参数传给这个...的方式来调用 login API 处理登录逻辑了。...配置云函数开发环境我们在上一小节中使用 Taro 为我们提供的云函数 API 调用了一个 login 云函数，现在我们马上来实现这个云函数。

2.8K2 0

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

对React的插槽(Portals)的理解，如何使用，有哪些使用场景 React 官方对 Portals 的定义： Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 Portals...（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,最重要的是你的额外学习成本是只服务于这个库的

2.8K0 0

2022社招React面试题附答案

对React的插槽(Portals)的理解，如何使用，有哪些使用场景 React 官方对 Portals 的定义： Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 Portals...（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,最重要的是你的额外学习成本是只服务于这个库的

2.8K5 0

Dva 底层是如何组织起 Redux 数据流的？

Dva 的优势易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用[6]后更是降低为 0 API elm 概念，通过 reducers, effects 和 subscriptions...dva[15] dva 做了三件比较重要的事情：代理 router 和 start 方法，实例化 app 对象调用 dva-core 的 start 方法，同时渲染视图使用 react-redux...完成了 react 到 redux 的连接。...Redux-Saga 的 createSagaMiddleware 创建 saga中间件，调用中间件的 run 方法所有收集起来的异步方法 // run方法监听每一个副作用action，当action...因为我们可以使用 Middleware 拦截 action, 这样一来异步的网络操作也就很方便了, 做成一个 Middleware 就行了, 这里使用 redux-saga 这个类库, 举个栗子: 点击创建

1.8K1 0

dva

saga书写太复杂，每监听一个action都需要走fork -> watcher -> worker的流程 redux entry书写麻烦，要完成store创建，中间件配置，路由初始化，Provider...依赖关系 dva react react-dom dva-core redux redux-saga history react-redux react-router-redux...model配置得到reducers，worker sagas, states后，屏蔽接下来的一系列繁琐工作：接redux（组合state，组合reducer）接redux-saga（完成redux-saga...优点：框架限制有利于工程化，砖块一样的代码最好了简化繁琐的样板代码（boilerplate code），仪式一样的action/reducer/saga/api… 解决多文件导致关注点分散的问题，逻辑分离是好事...围绕一个连接点的增强，如方法调用。这是最强大的一种增强类型。环绕增强可以在方法调用前后完成自定义的行为。

2.2K5 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭