如何在redux saga中从一个不知道其大小的数组中进行连续的api调用？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

redux-saga学习

/sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。...在 incrementAsync 的例子中，generator 连续 yield 了两个值： yield delay(1000) yield put({type: ‘INCREMENT’}) 所以，如果我们连续...也有可能是运行 Generator 函数并对返回的 Generator 进行迭代的测试代码）。所以调用者得到的是一个 Promise，像在以上的测试代码里一样。...在基于 redux-saga 的应用程序中，可以同时运行多个 task。...阻塞调用/非阻塞调用阻塞调用的意思是，Saga 在 yield Effect 之后会等待其执行结果返回，结果返回后才会恢复执行 Generator 中的下一个指令。

3.4K1 0

Redux：从action到saga

oldState, action) => newState 从一再来一次这看起来容易理解。...这个时候就需要redux-saga了。在redux-saga里saga就是一个可声明的组织良好的副作用实现方式（超时，API调用等等。。）...在上面的例子中我用了两种副作用：一个put副作用，它会给redux store分发一个action。一个call副作用，它会执行一个异步的方法（promise，cps后者其他的saga）。...所以，我们来看看如何在redux应用里添加saga。...一个saga本身就是一个副作用，就如同redux的reducer一样，绑定saga非常简单（但是很好的理解ES6的generator是非常有必要的）。

1.5K0 0

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

是的

没有找到

每日两题 T35

搜索旋转排序数组[1] 描述假设按照升序排序的数组在预先未知的某个点上进行了旋转。 ( 例如，数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] )。...搜索一个给定的目标值，如果数组中存在这个目标值，则返回它的索引，否则返回 -1 。你可以假设数组中不存在重复的元素。你的算法时间复杂度必须是 O(log n) 级别。...redux redux是 JavaScript 状态容器，提供可预测化的状态管理。应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合，优点是可以获取到各个异步操作时期状态的值，比较灵活，易于控制 •redux-promise的优点是...api层与store解耦，缺点是对请求失败，请求中的情形没有很好的处理 •redux-saga 的优点是api层与store解耦，对请求中，请求失败都有完善的处理，缺点是代码量较大 References

1.1K3 0

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

不过，pureComponent中的 shouldComponentUpdate() 进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致。...saga.js 中，不再是掺杂在 action.js 或 component.js 中 action摆脱thunk function: dispatch 的参数依然是⼀个纯粹的 action (FSA...,形成⼀个⾮常实⽤的异步flow 易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator...function,⽽且有数⼗个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是...函数组件是一个更加匹配其设计理念、也更有利于逻辑拆分与重用的组件表达形式。为了能让开发者更好的的去编写函数式组件。于是，React-Hooks 便应运而生。

2.6K0 0

手写Redux-Saga源码

上一篇文章我们分析了Redux-Thunk的源码，可以看到他的代码非常简单，只是让dispatch可以处理函数类型的action，其作者也承认对于复杂场景，Redux-Thunk并不适用，还推荐了Redux-Saga...整个Redux-Saga的运行和原本的Redux并不冲突，Redux甚至都不知道他的存在，他们之间耦合很小，只在需要的时候通过put发出action来进行通讯。...这种异步事件处理机制需要一个处理中心来存储事件和处理函数，还需要一个方法来触发队列中的事件的执行，再回看前面的使用的API，我们发现了两个类似功能的API： takeEvery(action, callback...，而不是简单的事件名称匹配，事实上Redux-Saga本身就支持好几种匹配模式，包括字符串，Symbol,数组等等。...，通过他的类型获取对应的处理函数，然后进行处理，我这里代码简化了，只支持IO这种effect，官方源码中还支持promise和iterator，具体的可以看看他的源码：github.com/redux-saga

2.1K3 0

社招前端一面react面试题汇总

(在构造函数中)调用 super(props) 的目的是什么在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()...也就是key值不一样的时候通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的...，在异步中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，去最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新合成事件中是异步钩子函数中的是异步原生事件中是同步...redux-saga优点：异步解耦：异步操作被被转移到单独saga.js中，不再是掺杂在action.js或component.js中；action摆脱thunk function: dispatch的参数依然是...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的

4.1K2 0

前端高频react面试题

React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...一些库如 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是，React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是rxjs

4.6K2 0

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

云函数：可以用 Node.js 进行开发，自己编写对应的后端逻辑，并把写好的代码传到云端，然后在小程序前端使用 API 进行调用。...序号4是代表我们此次的云环境的标识符，可以用于在小程序端以 API 调用云开发资源时标志此时的调用的云环境。在本篇教程中，我们会用到上面提到的数据库和云函数两项功能。...在 try 语句中，首先是使用了 redux-saga 提供给我们的 effects helper 函数：call 来调用登录的 API：userApi.login，并把 userInfo 作为参数传给这个...SET_IS_OPENED：设置登录框开启/关闭的信息我们还从 redux-saga/effects 包中导入了必要的函数： call：在 saga 函数中调用其他异步/同步函数，获取结果 put：...条件的 user 表数据，它查出来应该是个数组，如果不存在满足 where 条件的，那么是一个空数组，如果存在满足 where 条件的，那么返回一个 user 数组。

2.8K2 0

高频React面试题及详解

由于JavaScript中异步事件的性质，当您启动API调用时，浏览器会在此期间返回执行其他工作。...setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖...保存数据，数据变化后自动处理响应的操作 redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数；mobx中的状态是可变的，可以直接对其进行修改 mobx...功能孱弱: 有一些实际开发中常用的功能需要自己进行封装 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js 中，不再是掺杂在 action.js 或 component.js...分支覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的

3.4K4 0

关于前端面试你需要知道的知识点

React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定。...React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...可以使用自定义事件通信（发布订阅模式）可以通过redux等进行全局状态管理如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。

6.4K3 0

React-Redux-Saga

Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action...如果导入的是redux-saga, 那么返回给我们的是一个用于创建中间件对象的方法* */import createSagaMiddleware from 'redux-saga'import...如果是redux-saga, 那么除了需要在创建store的时候指定中间件以外, 还需要手动的调用中间件的run方法才行* */sagaMiddleware.run(undefined,...JS 流程框架与特性的标签里面会进行介绍什么是生成器，然后这个陌生的问题就过，我们继续，创建 saga.js 在当中定义生成器代码，在生成器函数中获取网络数据：import {takeEvery,...那么问题来了，如果想要验证如上博主所说的这点，就必须要派发多次 action 那么该如何进行派发呢，正好可以借助该问题就可以引出一个全新的知识点了那么就是连续派发多个 action，如果我们只需要拦截一个类型的

8543 0

redux-saga入门

saga中yield 后面的内容我们称呼它为Effect(redux-saga的任务单元)，在Effects中我们可以进行启动其它saga，也可以处理一些副作用操作。...action，其作用是产生一个dispatch行为的Effect，其action就是put中的参数action。...一个task就想一个在后台运行的进程，在redux-saga应用程序中，可以运行多个task，task可通过fork函数创建。...阻塞调用的意思是saga在yield Effect之后会等待其结果返回，结果返回后才会继续执行saga中下一个指令。...非阻塞调用的意思是，saga会在yield Effect之后立即恢复执行。下面是一个阻塞调用与非阻塞调用的例子。阻塞调用：下面代码中call是个会产生阻塞调用的方法。

1.8K2 0

百度前端必会react面试题汇总

，在异步中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，去最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新合成事件中是异步钩子函数中的是异步原生事件中是同步...redux applyMiddleware Api 源码中每个middleware 接受2个参数， Store 的getState 函数和dispatch 函数，分别获得store和action，最终返回一个函数...redux-saga优点：异步解耦：异步操作被被转移到单独saga.js中，不再是掺杂在action.js或component.js中；action摆脱thunk function: dispatch的参数依然是.../catch语法直接捕获处理；功能强⼤：redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤，开发者⽆须封装或者简单封装即可使⽤；灵活：redux-saga可以将多个Saga...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的

2.2K1 0

一天梳理完react面试高频题

提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是rxjs...React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。...进行【新虚拟DOM】和【旧的虚拟DOM】的diff比较，而在这个比较过程中key就是起到是关键中用如何将两个或多个组件嵌入到一个组件中？...的状态，通过当前state状态和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染

5.5K2 0

Redux + Hooks 工程实践

而且 Hooks API 在 Redux 的最佳实践建议中目前是 Level 2 的强烈推荐使用级别。他拥有更简洁的表达方式，更干净的 React 节点数，更友好的 typescript 支持。...具体 Redux 相关的 API 怎么用，这里不做介绍，可以直接跳转官方文档进行了解。下面我们会从一个应用场景来具体讲一讲，他们是怎么帮助我们更好地组织代码的。...Hooks ，例如我们需要提供一个数组数据简单操作，我们只关心添加和数量，就可以封装一个 Hooks，这样实际使用方只需要关心添加和数量这两个要素，不用关心 redux 的具体实现方式了...回顾看完上面的例子，相信聪明的读者已经知道我想表达的问题了。通过结合 Redux + Hooks，标准化了定义代码，对逻辑、调用、定义三者一定程度上进行了解耦。...通过简化的 API，减少了逻辑的理解成本，减少了后续维护的复杂度，一定程度上还可以达到复用。不管是相较于过去的 Redux 接入方案，还是相较于单纯使用 Hooks，都有着其独特的优势。

7141 0

redux-sage笔记

也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...saga是用来分发action进行处理，使系统流程更加清晰。推荐使用Generator函数。...redux-saga/effects tips: effects纯文本Javascript对象 - call - call() 调用给定函数。...第一个参数如果是数组的话，表示可以并发监听action - 可以更好的控制状态流 - 如下一个函数控制登陆和登出 //一个简单的登陆逻辑实现 //这个是会被阻塞的 function...未被捕获的话，这个错误是不会向上冒泡的使用redux-saga来处理一些复杂的流程的时候似乎比较不错

9023 0

React组件设计实践总结05 - 状态管理

unstated: 可能是简单状态管理工具中最好的 ---- Redux unstated 是一个极简的状态管理方案，其作者也说了不要认为unstated 是一个 Redux killer, 不要在它之上构建复杂的工具...如使用 saga 或 redux-promise 简化了不可变数据的操作方式。如使用 immer 简化 reducer。...我觉得可以从下面几个点进行考虑: 领域数据还是应用数据? 领域数据一般推荐放在 ReduxStore 中，我们通常会将 Redux 的 Store 看作一个数据库，存放范式化的数据。...视图是响应式数据的映射数据变更. mobx 推荐在 action/flow(异步操作) 中对数据进行变更，action 可以认为是 Redux 中的 dispatch+reducer 的合体。...比如 antd 的 Table 组件就不认 mobx 的数组, 需要传入到组件之间使用 slice 进行转换向一个已存在的 observable 对象中添加属性不会被自动捕获 MV* 只是 Mobx

2.8K3 1

React saga_react获取子组件ref

redux-saga简介 Redux-saga是Redux的一个中间件，主要集中处理react架构中的异步处理工作，被定义为generator(ES6)的形式，采用监听的形式进行工作。...action不易维护的原因： action的形式不统一就是异步操作太为分散，分散在了各个action中 2.redux-saga写一个hellosaga 跟redux-thunk,redux-saga...和调用redux的其他中间件一样，如果想使用redux-saga中间件，那么只要在applyMiddleware中调用一个createSagaMiddleware的实例。...首先，在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。...products = yield call(Api.fetch, '/products') // ... } 上述代码中，比如我们需要测试Api.fetch返回的结果是否符合预期，通过调用call

5.4K3 0

字节前端必会react面试题1

对象；子类必须在constructor方法中调用super方法；否则新建实例时会报错；因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。...状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染React中的setState和replaceState的区别是什么？...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是rxjs...我们将它们称为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。

3.9K2 0

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

显然，大多数的异步任务都需要和外部世界进行交互，不管是发起网络请求、访问本地文件或是数据库等等，因此，它们都会产生“副作用”。 3.什么是redux-saga？...上一篇我们介绍过Redux的中间件，说白了就是在action被传递到reducer之前新进行了一次拦截，然后启动异步任务，等异步任务执行完成后再发送一个新的action，调用reducer修改状态数据。...redux-saga的功能也是一样的，参见下图：左边的蓝圈圈里就是一堆saga，它们需要和外部进行异步I/O交互，等交互完成后再修改Store中的状态数据。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...提供了一系列API函数来生成Effect对象，比较常用的是下面这几个： call：函数调用 select：获取Store中的数据 put：向Store发送action take：在Store

2.2K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭