React的作用View层次的前端框架，自然少不了很多中间件（Redux Middleware）做数据处理, 而redux-saga就是...
import{all,put,takeEvery}from'redux-saga/effects'function*increment(){// 相当于:dispatch({ type: 'increment' })yieldput({type:'increment'})}function*watchIncrement(){// 监听类型为increment_saga的action,监听到启动incrementyieldtakeEvery('increment_saga',increment)}function*rootSaga(){// 启动wat...
当input值改变 的时候,通过 this.props.dispatch({type:'takeInputChange'}),调用此函数,但是因为遇到了take的方法,不能往下继续执行了(暂停了),如果这里的take换成了takeEvery则大有不同,函数会继续执行,就是下面的两个console会执行, 而takeEvery执行的方法则放在它的回调里了,看下面代码 yieldtakeEvery('take...
当yield take()运行时,将take()返回的结果交给外层的task,此时代码的控制权就已经从gennerator方法中转到了task里了。 result.value的值就是take()返回的结果{ type: 'take' }。 再看runTakeEffect的实现: function runTakeEffect(effect, cb) { chan.take(input => { cb(input); }); } 到这里,我们终于...
take的表现同takeEvery一样,都是监听某个action,但与takeEvery不同的是,他不是每次action触发的时候都相应,而只是在执行顺序执行到take语句时才会相应action。 当在genetator中使用take语句等待action时,generator被阻塞,等待action被分发,然后继续往下执行。
takeEvery 用来监听action,每个action都触发一次,如果其对应是异步操作的话,每次都发起异步请求,而不论上次的请求是否返回。 1 2 3 4 5 import { takeEvery } from 'redux-saga/effects' function* watchFetchData() { yield takeEvery('FETCH_REQUESTED', fetchData) } takeLatest 作用同takeEvery一样,唯...
redux-saga中的api有take、put、all、select这些,在redux-saga中将这些api都定义为Effect。在Effect执行后,当函数resolved时返回一个描述对象,然后saga根据这个描述对象恢复执行generator中的函数。 redux-thunk的大体过程: action1(side function)—>redux-thunk监听—>执行相应的有副作用的方法—>action2(plain object...
function*watchIncrementAsync(){yieldtakeLatest('incrementAsync',fetchData)} call 异步阻塞调用 用来调用异步函数,将异步函数和函数参数作为call函数的参数传入,返回一个js对象。saga引入他的主要作用是方便测试,同时也能让我们的代码更加规范化。 和js原生的call一样,call函数也可以指定this对象,只要把this对象当第...
import { put, takeEvery, all, delay } from 'redux-saga/effects'// Worker Saga: 工作 Saga 用于执行异步任务export function * fetchUserInfo (action) { const { type, payload } = action yield delay(1000) // 模拟异步请求，暂停 1s const userInfoArr = [ { name: 'user1', age...
但是 take 可以在 generator 函数中决定何时响应一个 action 以及 响应后的后续操作。例如在监听所有类型的 action 触发时进行 logger 操作，使用 takeEvery 实现如下：import { takeEvery } from 'redux-saga'function* watchAndLog(getState) { yield* takeEvery('*', function* logger(action) { //do ...