学习笔记：redux-saga

redux-saga学习笔记

基础概念

使用Saga Helpers

• 第一个函数 takeEvery是最为常见的，它提供了类似 redux-thunk的行为。

  import {takeLatest,takeEvery} from 'redux-saga'
  

• 如果你有多个Saga 监视不同的action ，你也一用内置辅助函数创建很多的观察者。就像是用fork来派生一样。

声明式Effects

• Sagas 都用 Generator 函数实现

• 声明式调用的优势是：我们可以简单的遍历Generator并且在yield后的成功值上面做一个deepEqual 测试，就能测试Saga中的所有逻辑。复杂的异步操作不再是黑盒。

call 同样支持调用对象方法，你可以使用以下形式，为调用的函数提供一个 this 上下文

yield call([obj, obj.method], arg1, arg2, ...) // 如同 obj.method(arg1, arg2 ...)

apply 提供了另外一种调用的方式：

yield apply(obj, obj.method, [arg1, arg2, ...])

dispatch action

• 利用put函数代替dispatch action跟 上面的call函数实现 内容差不多 ，让测试更加的简单易用。

错误处理

• 使用try/catch语法在Saga中捕获错误。
• 你并不一定得在 try/catch 区块中处理错误，你也可以让你的 API 服务返回一个正常的含有错误标识的值。例如， 你可以捕捉 Promise 的拒绝操作，并将它们映射到一个错误字段对象。

高级

监听未来的action

• 利用takeEvery take等函数监听所有发起到store的action

• 注意takeEvery和take 函数 的区别

  • 在take 的情况中 take 函数将会暂停Generator 知道匹配的函数被发起。

  • 在takeEvery的情况中，被调用的任务无法控制何时被调用，他们将在每次action被匹配时一遍一遍的被调用，并且他们无法决定什么时候停止监听。

    take 的情况中，控制恰恰相反。与 action 被 推向（pushed） 任务处理函数不同，Saga 是自己主动 拉取（pulling） action 的。 看起来就像是 Saga 在执行一个普通的函数调用 action = getNextAction()，这个函数将在 action 被发起时 resolve。

    这样的反向控制让我们可以使用传统的 push 方法实现不同的控制流程。

无阻塞调用

• call函数是一个会阻塞的Effect

  即 Generator 在调用结束之前不能执行或处理任何其他事情

• fork函数redux-saga提供的另外一个Effect 返回一个 Task Object

  当我们 fork 一个 任务，任务会在后台启动，调用者也可以继续它自己的流程，而不用等待被 fork 的任务结束。

• cancel函数 取消Task Object

• 这块介绍详细的描述了 一个登陆退出流程 前端所面临的问题

同时执行多个任务

import { call } from 'redux-saga/effects'

// 正确写法, effects 将会同步执行
const [users, repos] = yield [
  call(fetch, '/users'),
  call(fetch, '/repos')
]

当我们需要 yield 一个包含 effects 的数组， generator 会被阻塞直到所有的 effects 都执行完毕，或者当一个 effect 被拒绝 （就像 Promise.all 的行为)

在多个Effects之间启动race

• 在多个Effects之间触发一个竞赛（race）
• 自动取消那些失败的Effects

使用yield* 对Sagas进行排序

就是用yield* 操作符来组合多个Sagas，使他们保持顺序。

缺陷：

• 你可能会想要单独测试嵌套的 Generator。这导致了一些重复的测试代码及重复执行的开销。 我们不希望执行一个嵌套的 Generator，而仅仅是想确认它是被传入正确的参数来调用。
• 更重要的是，yield* 只允许任务的顺序组合，所以一次你只能 yield* 一个 Generator。

组合Sagas

取消任务

• 一旦任务被 fork ,可以使用yield cancel(task)来中止任务执行。取消正在运行的任务。
• 取消会导致所有深层等待的操作都被取消。
• 取消传播还将引发task的joiner被取消。同样的 任何那些joiner潜在的caller都会被取消（因为他们的阻塞操作已经在外面被取消）。

Noted：

1. yield cancel（task）不会等待被取消的任务完成（即执行catch块的语句）。
2. cancel 函数一旦发起，他就会尽快返回，一旦取消，任务通常应该尽快完成他的清理逻辑然后返回。

自动取消：

1. 在race Effect中。所有参与race的任务，除了最先完成的任务，其他任务会被取消。
2. 并行的Effect(yield[...])。一旦其中的任何一个任务被拒绝，并行的Effect将会被拒绝。在这种情况下，其他所有其他的Effect都将被自动取消。

关于并发

• takeEvery Effect函数
• takeLatest Effect函数

使用Channels

……