Redux Saga辅助函数

发表于 2019-12-28 更新于 2024-04-19 阅读次数：本文字数： 2.6k 阅读时长 ≈ 4 分钟

项目代码中，大家人云亦云的使用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));
}