延迟 Redux Saga

在使用 Redux Saga 处理异步逻辑时，有时候需要在 action 触发后延迟一段时间才执行后续操作，比如延迟渲染 loading 状态或是延迟发送请求。在 Redux Saga 中，可以使用 delay effect 来实现延迟逻辑。

延迟执行

delay effect 接受一个 number 类型的参数，表示需要延迟的时间（单位为毫秒）。在该时间过后，后续的逻辑才会执行。

function* fetchData(action) {
  yield delay(1000); // 延迟1秒执行
  try {
    // 发送请求
    const result = yield call(api.fetchData, action.payload);
    // 请求完成后的处理
    yield put(fetchDataSuccess(result));
  } catch (error) {
    // 请求失败的处理
    yield put(fetchDataFailure(error));
  }
}

取消延迟执行

如果在执行 delay 时，需要在之后的过程中取消延迟执行，可以使用 delay.cancel(task) 方法。

import { delay } from 'redux-saga/effects';

function* fetchData(action) {
  const task = yield delay(1000); // 延迟1秒执行
  try {
    // 发送请求
    const result = yield call(api.fetchData, action.payload);
    // 请求完成后的处理
    yield put(fetchDataSuccess(result));
  } catch (error) {
    // 请求失败的处理
    yield put(fetchDataFailure(error));
  } finally {
    if (yield cancelled()) {
      delay.cancel(task); // 取消延迟执行
    }
  }
}

结束语

通过使用 delay effect，Redux Saga 提供了一种简洁易懂的方式来实现延迟执行的逻辑。在处理异步逻辑时，延迟执行会是一个非常常见的需求，因此熟练掌握 delay effect 对于 Redux Saga 的学习和开发都非常重要。