Redux Saga辅助函数

· 3 min read

项目代码中，大家人云亦云的使用takeEvery辅助函数,实际上大错特错，应该按需使用。Saga的官方文档确实写的很差，于是翻源码，做测试，对此理解的透彻了些，这里Mark一番。

辅助函数

takeEvery

官方介绍如下

 * `takeEvery` allows concurrent actions to be handled. In the example above,
 * when a `USER_REQUESTED` action is dispatched, a new `fetchUser` task is
 * started even if a previous `fetchUser` is still pending (for example, the
 * user clicks on a `Load User` button 2 consecutive times at a rapid rate, the
 * 2nd click will dispatch a `USER_REQUESTED` action while the `fetchUser` fired
 * on the first one hasn't yet terminated)
 *
 * `takeEvery` doesn't handle out of order responses from tasks. There is no
 * guarantee that the tasks will terminate in the same order they were started.
 * To handle out of order responses, you may consider `takeLatest` below.

注意

takeEvery不可以保证effects结束顺序与发起顺序相同。
每发起一个action，即会执行一个effects

takeLeading

 * Spawns a `saga` on each action dispatched to the Store that matches
 * `pattern`. After spawning a task once, it blocks until spawned saga completes
 * and then starts to listen for a `pattern` again.
 *
 * In short, `takeLeading` is listening for the actions when it doesn't run a
 * saga.

注意

takeLeading监听的action，只有不阻塞时，才会执行。换句话说，只有当前action没有在执行的saga，发起才work。

takeLatest

 * Spawns a `saga` on each action dispatched to the Store that matches
 * `pattern`. And automatically cancels any previous `saga` task started
 * previously if it's still running.
 *
 * Each time an action is dispatched to the store. And if this action matches
 * `pattern`, `takeLatest` starts a new `saga` task in the background. If a
 * `saga` task was started previously (on the last action dispatched before the
 * actual action), and if this task is still running, the task will be
 * cancelled.

注意

takeLatest监听的action,如果action被派发，此时有在执行的effects,则会被取消，进而执行新的action。

上例子

function* fetchUserEffects(action) {
  console.log(`这是第${action.payload.count}次`);
  const userInfo = (yield call(getUserInfo)).data;
  yield put(setUserInfoAsync(userInfo));
  yield delay(1000);

  const userHistory = (yield call(getUserHistory)).data;
  yield put(setUserHistory(userHistory));
}