redux saga中状态flow无阻塞处理

[ShikiZhang]

以saga中的登录flow为例

import { fork, call, take, put } from 'redux-saga/effects'
import Api from '...'

function* authorize(user, password) {
  try {
    const token = yield call(Api.authorize, user, password)
    yield put({type: 'LOGIN_SUCCESS', token})
    yield call(Api.storeItem, {token})
    return token
  } catch(error) {
    yield put({type: 'LOGIN_ERROR', error})
  } finally {
    if (yield cancelled()) {
      // ... put special cancellation handling code here
    }
  }
}

function* loginFlow() {
  while(true) {
    const {user, password} = yield take('LOGIN_REQUEST')
    // fork return a Task object
    const task = yield fork(authorize, user, password)
    const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
    if(action.type === 'LOGOUT')
      yield cancel(task)
    yield call(Api.clearItem('token'))
  }
}

在登录状态流中我们期望的是：
用户登录->调用登录态接口->更新登录态->用户登出->删除登录态

在调用登录态接口时我们倾向于使用 call 进行同步调用，但是在调用时就loginFlow会被阻塞，如果用户想要登出就会得不到相应。

使用fork进行登录态接口的并发调用，但是要再登出时cancel调请求，可以在请求的api中的finally里处理被取消后的操作，例如将loading隐藏。

loginFlow这样的状态流在saga中还是比较常用的，将这些逻辑写在一个flow函数中比较清晰，便于维护，要尽量避免使用call进行异步方法时带来的阻塞问题，但是也要视具体场景灵活运用。