Redux Saga：用户触发操作时阻止Socket推送的put动作被处理

要实现“用户操作执行时忽略Socket推送更新，空闲时正常处理”的逻辑，核心是跟踪用户操作的执行状态，并在Socket推送时根据状态决定是否处理更新。以下是两种可行的实现方案：

方案一：使用Saga内部状态跟踪（轻量版） #

通过Saga内部变量维护用户操作的忙碌状态，无需修改Redux Store，适合简单场景：

import { fork, take, takeLatest, put, call, cancelled } from 'redux-saga/effects';

// 内部变量：标记用户操作是否正在执行
let isUserActionBusy = false;

// 包装用户操作Saga，自动更新忙碌状态
function* wrapUserAction(saga) {
  isUserActionBusy = true;
  try {
    yield call(saga);
  } finally {
    // 无论正常完成还是被取消，都标记为空闲
    if (yield cancelled()) {
      isUserActionBusy = false;
    } else {
      isUserActionBusy = false;
    }
  }
}

// 原有的业务逻辑Saga
function* updateWork() { /* 你的更新逻辑 */ }
function* addWork() { /* 你的新增逻辑 */ }
function* deleteWork() { /* 你的删除逻辑 */ }

function* workWatchers() {
  // 用包装后的逻辑替换原有的takeLatest
  yield takeLatest(WorkTypes.UPDATE_WORK, wrapUserAction, updateWork);
  yield takeLatest(WorkTypes.ADD_WORK, wrapUserAction, addWork);
  yield takeLatest(WorkTypes.DELETE_WORK, wrapUserAction, deleteWork);
}

function* socketWatch() {
  const socketPushChannel = yield call(socket.createChannel.bind(socket));
  while (true) {
    try {
      const message = yield take(socketPushChannel);
      if (message.type === 'someTest') {
        // 用户操作空闲时才处理Socket推送的更新
        if (!isUserActionBusy) {
          yield put(updateWorkAction());
        }
      }
    } catch (error) {
      logger.warn('Push message failed with error: ', error);
    }
  }
}

export function* rootWork() {
  yield fork(workWatchers);
  yield fork(socketWatch);
}

方案二：使用Redux Store跟踪状态（规范版） #

通过Redux Store维护用户操作状态，符合Redux数据流向，便于调试和扩展：

1. 新增状态与Action #

// 定义状态更新的Action类型
export const UserActionTypes = {
  SET_USER_ACTION_BUSY: 'SET_USER_ACTION_BUSY'
};

// 创建Action Creator
export const setUserActionBusy = (isBusy) => ({
  type: UserActionTypes.SET_USER_ACTION_BUSY,
  payload: isBusy
});

// 在Work Reducer中添加状态
const initialWorkState = {
  // 原有业务状态
  isUserActionBusy: false // 新增：标记用户操作是否忙碌
};

export function workReducer(state = initialWorkState, action) {
  switch (action.type) {
    case UserActionTypes.SET_USER_ACTION_BUSY:
      return { ...state, isUserActionBusy: action.payload };
    // 原有的业务逻辑Case
    default:
      return state;
  }
}

2. 修改Saga逻辑 #

import { fork, take, takeLatest, put, call, cancelled, select } from 'redux-saga/effects';

// 状态选择器：获取用户操作忙碌状态
const selectIsUserActionBusy = (state) => state.work.isUserActionBusy;

// 包装用户操作Saga，同步更新Store状态
function* wrapUserAction(saga) {
  yield put(setUserActionBusy(true));
  try {
    yield call(saga);
  } finally {
    // 操作完成/取消后重置状态
    if (yield cancelled()) {
      yield put(setUserActionBusy(false));
    } else {
      yield put(setUserActionBusy(false));
    }
  }
}

// 原有的业务逻辑Saga
function* updateWork() { /* 你的更新逻辑 */ }
function* addWork() { /* 你的新增逻辑 */ }
function* deleteWork() { /* 你的删除逻辑 */ }

function* workWatchers() {
  yield takeLatest(WorkTypes.UPDATE_WORK, wrapUserAction, updateWork);
  yield takeLatest(WorkTypes.ADD_WORK, wrapUserAction, addWork);
  yield takeLatest(WorkTypes.DELETE_WORK, wrapUserAction, deleteWork);
}

function* socketWatch() {
  const socketPushChannel = yield call(socket.createChannel.bind(socket));
  while (true) {
    try {
      const message = yield take(socketPushChannel);
      if (message.type === 'someTest') {
        // 从Store获取状态，判断是否处理推送
        const isBusy = yield select(selectIsUserActionBusy);
        if (!isBusy) {
          yield put(updateWorkAction());
        }
      }
    } catch (error) {
      logger.warn('Push message failed with error: ', error);
    }
  }
}

export function* rootWork() {
  yield fork(workWatchers);
  yield fork(socketWatch);
}

关键细节说明 #

• takeLatest的取消处理：当用户连续触发同一操作时，前一次操作会被取消，finally块中的cancelled()会捕获该状态，确保忙碌状态被正确重置。
• Socket推送的忽略逻辑：仅在用户操作空闲时才分发updateWorkAction，避免与用户操作的状态更新冲突。

内容的提问来源于stack exchange，提问作者mishaniy