测试redux-saga takeEvery - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React saga_react获取子组件ref

import { takeEvery } from 'redux-saga/effects' function* watchFetchData() { yield takeEvery('FETCH_REQUESTED...（1）声明式的Effect redux-saga中最大的特点就是提供了声明式的Effect，声明式的Effect使得redux-saga监听原始js对象形式的action，并且可以方便单元测试，我们一一来看...通过使用Effect类函数，可以方便单元测试，我们不需要测试副作用函数的返回结果。只需要比较执行Effect方法后返回的描述对象，与我们所期望的描述对象是否相同即可。...takeEvery和takeLatest takeEvery和takeLatest用于监听相应的动作并执行相应的方法，是构建在take和fork上面的高阶api，比如要监听login动作，好用takeEvery...方法可以： takeEvery('login',loginFunc) takeEvery监听到login的动作，就会执行loginFunc方法，除此之外，takeEvery可以同时监听到多个相同的action

4.5K3 0

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

那么具体怎么执行的就可以随意的切换了，这样测试的时候只需要模拟传入对应的数据，就可以测试 worker saga 了。...redux-saga 提供了 all、race、takeEvery、takeLatest 等 effect 来指定多个异步过程的关系：比如 takeEvery 会对多个 action 的每一个做同样的处理...所以 redux-saga 可以做复杂异步过程的管理，而且具有很好的可测试性。...但是 redux-saga 的优点还有基于 generator 的良好的可测试性，而且大多数场景下，redux-saga 提供的异步过程的处理能力就足够了，所以相对来说，redux-saga 用的更多一些...redux-saga 透传了 action 到 store，并且监听 action 执行相应的异步过程。异步过程的描述使用 generator 的形式，好处是可测试性。

2.5K1 0

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

是的

没有找到

redux-saga学习

放到 race 方法里以自动取消 redux-saga 使用了 ES6 的 Generator 功能，让异步的流程更易于读取，写入和测试。..."; import { put,takeEvery,all } from "redux-saga/effects"; function* helloSaga(){ console.log('hello...代码测试创建另一个文件 sagas.spec.js： import test from 'tape'; import { put, call } from 'redux-saga/effects...redux-saga 使用 PUT 来描述dispatch 一个 action 到 Store 而不是直接dispatch action 的原因也是为了方便测试。...允许处理并发的 action 不会阻塞 import { takeEvery } from `redux-saga/effects` function* fetchUser(action) {

2.7K1 0

React之redux学习日志（reduxreact-reduxredux-saga）

/sagas"; import createSagaMiddleware from "redux-saga"; // 创建 redux-saga 中间件 const sagaMiddleware =...sagaMiddleware.run(testSaga) export default store 　　在 store 中新增 sagas.js 文件 import { call, put, takeEvery...updateUserInfoAction(res)) } function* testSaga() { // 当action-type被准备dispatch时，执行 getUserInfo // 声明 effects 函数：takeEvery...监听一个action yield takeEvery('GET_USERINFO_ACTION', getUserInfoSaga) } export default testSaga 　　...redux-saga中有很多声明 effects 函数（比如：call、put、takeEvery、all、fock等等），具体请查阅redux-saga文档。

5583 0

手写Redux-Saga源码

的call这个effect，这样做可以让我们写单元测试变得更简单，为什么会这样，我们后面讲源码的时候再来仔细看看。...可以看到Redux-Saga这种机制也是用takeEvery先注册回调，然后使用put发出消息来触发回调执行，这其实跟我们其他文章多次提到的发布订阅模式很像。...这里我们先实现take，takeEvery是在这个基础上实现的。Redux-Saga中这块代码是单独抽取了一个文件，我们仿照这种做法吧。...但是如果你使用Redux-Saga的effect，每次你代码运行的时候得到的都是一个任务描述对象，这个对象是稳定的，不受运行结果影响，也就不需要针对这个造测试数据了，大大减少了工作量。...effects对应的源码文件看这里：github.com/redux-saga/… takeEvery 我们前面还用到了takeEvery来处理同时发起的多个请求，这个API是一个高级API，是封装前面的

1.7K3 0

关于redux-saga中take使用方法

带来一个自己研究好久的API使用方法. redux-saga中effect中take这个API使用方式,用的多的是call,put,select,但take这个平常还真没什么机会用上,也不清楚在哪里使用才好...,不管怎么样,既然是redux-saga写出来的,肯定是有他的用法的,不管37 21,先学会使用方法再说....先看看介绍: take take的表现同takeEvery一样，都是监听某个action，但与takeEvery不同的是，他不是每次action触发的时候都相应，而只是在执行顺序执行到take语句时才会相应...takeEvery只是监听每个action，然后执行处理函数。对于何时相应action和如何相应action，takeEvery并没有控制权。...则大有不同,函数会继续执行,就是下面的两个console会执行, 而takeEvery执行的方法则放在它的回调里了,看下面代码 yield takeEvery('takeBlur',()=>{console.log

1.9K5 0

Redux-Saga中间件

否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用安装: yarn add redux-saga store.js import { createStore...applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import createSagaMiddleware from 'redux-saga...// 对action进行监听 } from 'redux-saga/effects'; export function* fetchData() { // 利用generator + yield...的第一个参数则触发 fetchData这个函数 export function* watch() { yield takeEvery('fetchData', fetchData); } 正常使用...saga常用API takeEvery("actionType", generator).

1.1K2 0

redux-saga入门

文章目录资料 redux-saga简介常用API takeLatest takeEvery take delay put call fork cancel all 案例1：错误处理了案例2：错误未处理...sagas.js文件 import { all, put, takeEvery } from 'redux-saga/effects' function* increment() {...takeEvery同理。...import { all, put, takeEvery, delay, takeLatest } from 'redux-saga/effects' function* rootSaga() {...`); } export default rootSaga 实现takeEvery和takeLatest import { take, fork } from "redux-saga/effects

1.4K2 0

redux-saga

Effect层存在的主要意义是为了易测试性，所以用简单的描述对象来表示操作，多这样一层指令虽然可以直接yield Promise（比如上面核心实现里的示例），但测试case中无法比较两个promise...所以添一层描述对象来解决这个问题，测试case中可以简单比较描述对象，实际起作用的Promise由redux-saga内部生成这样做的好处是单测中不用mock异步方法（一般单测中会把所有异步方法替换掉...从单元测试的角度来看，Effect相当于把参数提出去了，让“比较传入参数是否相同”这一步可以在外面统一进行，而不用逐个mock替换 P.S.关于易测试性的更多信息，请查看Testing Sagas 另外...，mock测试不但比较麻烦，还不可靠，毕竟与真实场景/流程有差异。...（不用mock异步函数），这不很过分注意，不需要mock异步函数只是简化了单元测试的一个环节，即便使用这种对比描述对象的方式，仍然需要提供预期的数据，例如： // 测试场景直接执行 const iterator

1.9K4 1

React-Redux-Saga

Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga在创建 store 时应用 redux-saga...dispatch 派发的 action 需要进行拦截, 在 run 方法进行指定：图片在组件中派发 action 这回我们派发的 action 就不用像 thunk 一样派发一个函数了图片图片除了通过 takeEvery...takeEvery 和 takeLatest 区别区别主要在于是否能够完整的执行监听方法：对于 takeEvery 而言，每次拦截到对应类型的 action, 都会完整的执行监听方法对于 takeLatest...而言, 每次拦截到对应类型的 action, 都不能保证一定能够完整的执行监听方法例如: 连续派发了 3 次 GET_USER_INFO 的 action, 那么对于 takeEvery 而言, myHandler

2143 0

redux-sage笔记

也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...以下是一些saga的常用方法 redux/saga takeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts) 每当有PRODUCTS_REQUESTED...分发的时候就执行fetchProducts函数，在这里fetchProducts函数也是Generator函数(tips:注意yield* 就是在Generator内执行另一个Generator函数) takeEvery...('\*', function * xx(){/\** ***/})表示匹配所有的action takeLatest 只执行最新的任务，之前如果有正在执行的任务则会被取消 redux-saga/effects...未被捕获的话，这个错误是不会向上冒泡的使用redux-saga来处理一些复杂的流程的时候似乎比较不错

7233 0

redux-saga_pub culture

/redux-saga redux-saga is a library that aims to make side effects (i.e. asynchronous things like data...当然，Saga对自动化测试也支持的很好，可以将逻辑单独使用自动化脚本测试，提高项目质量。...redux-saga提供了几种产生副作用的方式, 主要用到了有两种takeEvery和takeLates。 takeEvery会在接到相应的action之后不断产生新的副作用。...比如，做一个计数器按钮，用户需要不断的点击按钮，对后台数据更新，这里可以使用takeEvery来触发。...sagas.js import { takeEvery ,put } from 'redux-saga/effects'; import { GET_INIT_LIST } from '.

1.4K1 0

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

3.什么是redux-saga？ redux-saga是一个Redux中间件，用来帮你管理程序的副作用。或者更直接一点，主要是用来处理异步action。...("USER_FETCH_REQUESTED", workerSaga); } 我们先看一下watcherSaga：watcherSaga中使用了redux-saga提供的API函数takeEvery(...但是这样的话不好做模拟（mock）测试：我们在测试过程中，一般不会真的执行异步任务，而是替换成一个假函数。实际上，我们只需要确保yield了一个正确的函数，并且函数有着正确的参数。...这条指令是一个纯Javascript对象（类似于action）： { CALL: { fn: Api.fetchUser, args: ['alice'] } } 这样，当我们需要测试...("FOO_ACTION", fooASaga), takeEvery("BAR_ACTION", barASaga) ]) } 最后，你需要在createStore()时注册redux-saga

1.7K3 0

JavaScript 中的函数式编程：纯函数与副作用

由于纯函数的输出完全由输入决定，所以测试起来非常简单和直观。...测试困难：测试具有副作用的函数需要考虑更多的因素，包括外部状态的初始值和变化，增加了测试的复杂性。代码维护困难：副作用可能导致代码之间的紧密耦合，使得代码的修改和扩展变得困难。...} from 'redux-saga/effects';import fetchDataSaga from '....error) { yield put(fetchDataFailure(error.toString())); }}function* watchFetchDataSaga() { yield takeEvery...watchFetchDataSaga 是一个监听器 saga，它使用 takeEvery 效应来监听 FETCH_DATA_SAGA action 的每一次触发，并调用 fetchDataSagaWorker

1710 0

redux-saga

因此我们首先得学习Redux，中文官网地址：http://cn.redux.js.org/ 此时我们可以很好的在大型项目中管理我们的state了，但如果我们要异步获取数据、访问浏览器缓存等操作，就需要用到Redux-Saga...官网地址(英文)：https://redux-saga.js.org/ 中文文档地址：https://redux-saga-in-chinese.js.org/ 我简单进行入门了一下，编写了一个redux-saga

5501 0

React全家桶与前端单元测试艺术｜洞见

我们用一个叫做Redux-saga的库来展现全家桶的异步测试怎么写，Redux模仿的目标是Elm architecture，但是简化掉了Elm的作用模型，只保留了同步模型，Redux-saga其实就是把...Redux-saga抽象出来多种通用的作用比如call / takeEvery等等，然后有了这些作用，我们又可以愉快地判等了。...比如： import { takeEvery, put, call, fork, cancel } from 'redux-saga/effects' function *account() {...这是个最普通的API处理saga，一个account worker看到每个'login/REQUESTED'就会forward给login worker(takeEvery)，让它继续管下面的事。...test('account saga', t => { const gen = account() t.deepEqual(gen.next().value, call(takeEvery, '

1.1K7 2

React：Redux怎么处理异步？

redux-promise：基于Promise的异步处理； redux-promise-middleware：还是Promise； redux-saga：最优雅！最复杂！ ? ?...扫码查看示例源码 2. redux-saga redux: store.dispatch({type: "INC", payload:....}); redux-thunk: store.dispatch...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.7K3 0

高级前端react面试题总结

/ num = [...num ,1] setNums(num) }return ( 测试...redux-saga如何处理并发：takeEvery可以让多个 saga 任务并行被 fork 执行。...import { fork, take} from "redux-saga/effects"const takeEvery = (pattern, saga, ...args) => fork...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗

4.1K4 0

一天梳理完react面试高频题

React的组件具有如下的特性∶可组合：简单组件可以组合为复杂的组件可重用：每个组件都是独立的，可以被多个组件使用可维护：和组件相关的逻辑和UI都封装在了组件的内部，方便维护可测试：因为组件的独立性，测试组件就变得方便很多...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等redux-saga缺陷:额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗...createStore(reducer, enhancer);sagaMiddleware.run(TodoListSaga)export default store;将异步请求放在sagas.js中import {takeEvery...console.log('网络请求失败') }}function* mySaga(){ // 自动捕获GET_INIT_ITEM类型的action，并执行func yield takeEvery

4.1K2 0

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

redux异步流中间件其实有很多，当下主流的异步中间件有两种redux-thunk、redux-saga。...易测试，提供了各种case的测试⽅案，包括mock task，分⽀覆盖等等 redux-saga缺陷: 额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function...reducer, enhancer); sagaMiddleware.run(TodoListSaga) export default store; 复制代码将异步请求放在sagas.js中 import {takeEvery..., put} from 'redux-saga/effects' import {initTodoList} from '....console.log('网络请求失败') } } function* mySaga(){ // 自动捕获GET_INIT_ITEM类型的action，并执行func yield takeEvery

2K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭