码迷,mamicode.com
首页 > 其他好文 > 详细

redux-saga学习进阶篇二

时间:2019-07-05 12:44:29      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:调用   result   fetch   hapi   error   学习目录   有用   调用链   顺序组   

今日学习目录

一、race进一步讨论

二、组合saga

三、取消任务caceled进一步讨论

?

一、race进一步讨论

有时候我们同时启动多个任务,但又不想等待所有任务完成,我们只希望拿到 胜利者:即第一个被 resolve(或 reject)的任务。 race Effect 提供了一个方法,在多个 Effects 之间触发一个竞赛(race)。

// 1. 触发一个远程的获取请求,并且限制了 1 秒内响应,否则作超时处理。
import { race, call, put } from 'redux-saga/effects'
import { delay } from 'redux-saga'

function* fetchPostsWithTimeout() {
  const {posts, timeout} = yield race({
    posts: call(fetchApi, '/posts'),
    timeout: call(delay, 1000)
  })

  if (posts)
    put({type: 'POSTS_RECEIVED', posts})
  else
    put({type: 'TIMEOUT_ERROR'})
}
// 2. race 的另一个有用的功能是,它会自动取消那些失败的 Effects。
import { race, take, call } from 'redux-saga/effects'

function* backgroundTask() {
  while (true) { ... }
}

function* watchStartBackgroundTask() {
  while (true) {
    yield take('START_BACKGROUND_TASK')
    yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')
    })
  }
}

二、 组合Sagas

虽然使用 yield* 是提供组合 Sagas 的惯用方式,但这个方法也有一些局限性

  • 你可能会想要单独测试嵌套的 Generator。这导致了一些重复的测试代码及重复执行的开销。 我们不希望执行一个嵌套的 Generator,而仅仅是想确认它是被传入正确的参数来调用。

  • 更重要的是,yield* 只允许任务的顺序组合,所以一次你只能 yield* 一个 Generator。

// 1. 直接使用 yield 来并行地启动一个或多个子任务
// 当 yield 一个 call 至 Generator,Saga 需要等待 Generator 处理结束, 
// 然后以返回的值恢复执行(或错误从子任务中传播过来,则抛出异常)
function* fetchPosts() {
  yield put( actions.requestPosts() )
  const products = yield call(fetchApi, '/products')
  yield put( actions.receivePosts(products) )
}

function* watchFetch() {
  while ( yield take(FETCH_POSTS) ) {
    yield call(fetchPosts) // 等待 fetchPosts 完成
  }
}
// 2. yield 一个队列的嵌套的 Generators,将同时启动这些子 Generators(sub-generators),
// 并等待它们完成。 然后以所有返回的结果恢复执行:
function* mainSaga(getState) {
  const results = yield [call(task1), call(task2), ...]
  yield put(showResults(results))
}
// 3. 使用 effect 合并器将那些 Sagas 和所有其他类型的 Effect 合并。
function* game(getState) {
  let finished
  while(!finished) {
    // 必须在 60 秒内完成
    const {score, timeout} = yield race({
      score: call( play, getState),
      timeout: call(delay, 60000)
    })

    if (!timeout) {
      finished = true
      yield put(showScore(score))
    }
  }
}

三、取消任务进一步讨论

. 一旦任务被 fork,可以使用 yield cancel(task) 来中止任务执行。取消正在运行的任务

example:

一个可通过某些 UI 命令启动或停止的后台同步任务。 在接收到 START_BACKGROUND_SYNC action 后,我们 fork 一个后台任务,周期性地从远程服务器同步一些数

这个任务将会一直执行直到一个 STOP_BACKGROUND_SYNC action 被触发。 然后我们取消后台任务,等待下一个 START_BACKGROUND_SYNC action。

import { take, put, call, fork, cancel, cancelled, delay } from 'redux-saga/effects'
import { someApi, actions } from 'somewhere'

function* bgSync() {
  try {
    while (true) {
      yield put(actions.requestStart())
      const result = yield call(someApi)
      yield put(actions.requestSuccess(result))
      yield delay(5000)
    }
  } finally {
    if (yield cancelled())
      yield put(actions.requestFailure('Sync cancelled!'))
  }
}

function* main() {
  while ( yield take(START_BACKGROUND_SYNC) ) {
    // 启动后台任务
    const bgSyncTask = yield fork(bgSync)

    // 等待用户的停止操作
    yield take(STOP_BACKGROUND_SYNC)
    // 用户点击了停止,取消后台任务
    // 这会导致被 fork 的 bgSync 任务跳进它的 finally 区块
    yield cancel(bgSyncTask)
  }
}
// 取消 bgSyncTask 将会导致 Generator 跳进 finally 区块。
// 可使用 yield cancelled() 来检查 Generator 是否已经被取消。

2. 取消正在执行的任务,也将同时取消被阻塞在当前 Effect 中的任务。

举个例子,假设在应用程序生命周期的某个时刻,还有挂起的(未完成的)调用链:

function* main() {
  const task = yield fork(subtask)
  ...
  // later
  yield cancel(task)
}

function* subtask() {
  ...
  yield call(subtask2) // currently blocked on this call
  ...
}

function* subtask2() {
  ...
  yield call(someApi) // currently blocked on this call
  ...
}
// yield cancel(task) 触发了 subtask 任务的取消,反过来它将触发 subtask2 的取消。

3. 关于自动取消

除了上述的一些手动取消外,还存在一些自动取消的案例

  • 在race Effect中,除了最先完成任务的,其他都会被取消
  • 并行的Effect( yield [...] ),一旦其中的任何一个任务被拒绝了,并行的Effect将会被拒绝(受Promise.all启发)

redux-saga学习进阶篇二

标签:调用   result   fetch   hapi   error   学习目录   有用   调用链   顺序组   

原文地址:https://www.cnblogs.com/fe-linjin/p/11137430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!