使用redux-saga中间件处理redux中的异步

本文转自我的博客阅读原文。

整体感知

使用redux-saga封装异步操作

import { call, put } from 'redux-saga/effects'
import { takeEvery } from 'redux-saga'
// 这个函数就封装了我们的异步操作，每一个yield都要等上一个yield完成之后再执行
function* fetchData(action) {
   try {
     // 这里其实是用声明式的方式调用Api.fetchUser方法，并传入参数
      const data = yield call(Api.fetchUser, action.payload.url);
      yield put({type: "FETCH_SUCCEEDED", data});
   } catch (error) {
      yield put({type: "FETCH_FAILED", error});
   }
}
// 监听INCREMENT_ASYNC action的调用，然后调用fetchData这个封装了异步的generate函数
export function* watchFetchData() {
  yield* takeEvery('FETCH_REQUESTED', fetchData)
}

将`watchFetchData`这个Saga连接至Store

import { fetchData, watchFetchData } from './sagas'
const store = createStore(
  reducer,
  applyMiddleware(createSagaMiddleware(watchFetchData))
)

细节展示

Saga辅助函数

takeEvery是最常见的，它提供了类似redux-thunk的行为；takeLatest则只执行最后一次fetchData

import { takeEvery } from 'redux-saga'
function* watchFetchData() {
  // 只要监听到FETCH_REQUESTED这个action被派发，就一定会调用fetchData。不管上一次的fetchData有没有完成
  yield* takeEvery('FETCH_REQUESTED', fetchData)
  // 可以作为节流函数使用，还可以避免上一次输入已经清空，但结果还是返回了上次的输入得到的结果
  yield* takeLatest('FETCH_REQUESTED', fetchData)
}

声明式Effects

在 redux-saga 的世界里，Sagas 都用 Generator 函数实现。我们从 Generator 里 yield 纯 JavaScript 对象以表达 Saga 逻辑。我们称呼那些对象为 Effect。Effect 是一个简单的对象，这个对象包含了一些给 middleware 解释执行的信息。你可以把 Effect 看作是发送给 middleware 的指令以执行某些操作（调用某些异步函数，发起一个 action 到 store）。

call

为什么我们使用call声明式地调用一个函数而不是用“函数()”的方式？这是为了方便我们做断言测试。
call 同样支持调用对象方法，你可以使用以下形式，为调用的函数提供一个 this 上下文：

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

apply

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

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

cps

call 和 apply 非常适合返回 Promise 结果的函数。另外一个函数 cps 可以用来处理 Node 风格的函数（例如，fn(...args, callback) 中的 callback 是 (error, result) => () 这样的形式，cps 表示的是延续传递风格（Continuation Passing Style））。

import { cps } from 'redux-saga'
const content = yield cps(readFile, '/path/to/file')

put

同样的，如果我们想在获取到异步数据之后派发一个action也不能直接dispatch({ type: 'PRODUCTS_RECEIVED', products })而是要用yield put({ type: 'PRODUCTS_RECEIVED', products })这样声明式的调用以便测试。

错误处理

我们可以使用熟悉的 try/catch 语法在 Saga 中捕获错误。

import Api from './path/to/api'
import { call, put } from 'redux-saga/effects'
function* fetchProducts() {
  try {
    const products = yield call(Api.fetch, '/products')
    yield put({ type: 'PRODUCTS_RECEIVED', products })
  }
  catch(error) {
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
  }
}

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

import Api from './path/to/api'
import { take, put } from 'redux-saga/effects'
function fetchProductsApi() {
  return Api.fetch('/products')
    .then(response => {response})
    .catch(error => {error})
}
function* fetchProducts() {
  const { response, error } = yield call(fetchProductsApi)
  if(response)
    yield put({ type: 'PRODUCTS_RECEIVED', products: response })
  else
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
}

高级（官方中文文档）

监听未来的action

之前我们有用takeEvery来对每一个相同的action进行无差别对待，但其实我们也有take可以对每一次的action进行细微调控。比如说，我们可以在观察到用户完成了3个任务之后，派发一个向用户表示祝贺的action。

同时执行多个任务

yield 指令可以很简单的将异步控制流以同步的写法表现出来，但与此同时我们将也会需要同时执行多个任务，我们不能直接这样写：

// 错误写法，effects 将按照顺序执行
const users = yield call(fetch, '/users'),
      repos = yield call(fetch, '/repos')
      import { call } from 'redux-saga/effects'

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

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

同时启动多个任务，择其优者取值

有时候我们同时启动多个任务，但又不想等待所有任务完成，我们只希望拿到胜利者：即第一个被 resolve（或 reject）的任务。 race Effect 提供了一个方法，在多个 Effects 之间触发一个竞赛（race）。
下面的示例演示了触发一个远程的获取请求，并且限制了 1 秒内响应，否则作超时处理。

import { race, take, put } from 'redux-saga/effects'
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'})
}

race 的另一个有用的功能是，它会自动取消那些失败的 Effects。具体实例参看官方文档