名词解释

这是 Redux Saga 核心的术语词汇表。

Effect

一个 effect 就是一个 Plain Object JavaScript 对象,包含一些将被 saga middleware 执行的指令。

使用 redux-saga 提供的工厂函数来创建 effect。 举个例子,你可以使用 call(myfunc, 'arg1', 'arg2') 指示 middleware 调用 myfunc('arg1', 'arg2') 并将结果返回给 yield effect 的那个 Generator。

Task

一个 task 就像是一个在后台运行的进程。在基于 redux-saga 的应用程序中,可以同时运行多个 task。通过 fork 函数来创建 task:

  1. function* saga() {
  2. ...
  3. const task = yield fork(otherSaga, ...args)
  4. ...
  5. }

阻塞调用/非阻塞调用

阻塞调用的意思是,Saga 在 yield Effect 之后会等待其执行结果返回,结果返回后才会恢复执行 Generator 中的下一个指令。

非阻塞调用的意思是,Saga 会在 yield Effect 之后立即恢复执行。

示例:

  1. function* saga() {
  2. yield take(ACTION) // 阻塞: 将等待 action
  3. yield call(ApiFn, ...args) // 阻塞: 将等待 ApiFn (如果 ApiFn 返回一个 Promise 的话)
  4. yield call(otherSaga, ...args) // 阻塞: 将等待 otherSaga 结束
  5. yield put(...) // 非阻塞: 将同步发起 action (使用 Promise.then)
  6. yield put.resolve(...) // 阻塞
  7. const task = yield fork(otherSaga, ...args) // 非阻塞: 将不会等待 otherSaga
  8. yield cancel(task) // 非阻塞: 将立即恢复执行
  9. // or
  10. yield join(task) // 阻塞: 将等待 task 结束
  11. }

Watcher/Worker

指的是一种使用两个单独的 Saga 来组织控制流的方式。

  • Watcher: 监听发起的 action 并在每次接收到 action 时 fork 一个 worker。

  • Worker: 处理 action 并结束它。

示例:

  1. function* watcher() {
  2. while(true) {
  3. const action = yield take(ACTION)
  4. yield fork(worker, action.payload)
  5. }
  6. }
  7. function* worker(payload) {
  8. // ... do some stuff
  9. }