应用依赖服务端配置数据，如何用Redux Saga为所有Action创建阻塞前置Action？

嘿，我来帮你搞定这个问题！要实现每个业务Action触发前先阻塞加载服务端配置的需求，我们可以用Redux Saga的拦截器式逻辑来实现——核心思路是先拦截需要前置配置的Action，确保配置加载完成后再放行原Action处理。下面是具体的实现方案：

1. 先搞定配置的状态管理 #

首先得有一套配置加载的Action和Reducer，用来追踪配置的加载状态：

// actions/config.js
export const CONFIG_LOAD_REQUEST = 'CONFIG_LOAD_REQUEST';
export const CONFIG_LOAD_SUCCESS = 'CONFIG_LOAD_SUCCESS';
export const CONFIG_LOAD_FAILURE = 'CONFIG_LOAD_FAILURE';

export const loadConfig = () => ({ type: CONFIG_LOAD_REQUEST });
export const loadConfigSuccess = (config) => ({ type: CONFIG_LOAD_SUCCESS, payload: config });
export const loadConfigFailure = (error) => ({ type: CONFIG_LOAD_FAILURE, payload: error });

// reducers/config.js
const initialState = {
  data: null,
  loading: false,
  error: null,
};

export default function configReducer(state = initialState, action) {
  switch (action.type) {
    case CONFIG_LOAD_REQUEST:
      return { ...state, loading: true, error: null };
    case CONFIG_LOAD_SUCCESS:
      return { ...state, loading: false, data: action.payload };
    case CONFIG_LOAD_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

2. 编写配置加载的核心Saga #

这个Saga负责实际调用服务端接口获取配置：

// sagas/configSaga.js
import { call, put, takeLatest } from 'redux-saga/effects';
import { CONFIG_LOAD_REQUEST, loadConfigSuccess, loadConfigFailure } from '../actions/config';
import { fetchConfigFromServer } from '../api'; // 替换成你的服务端请求函数

function* loadConfigSaga() {
  try {
    const config = yield call(fetchConfigFromServer);
    yield put(loadConfigSuccess(config));
  } catch (error) {
    yield put(loadConfigFailure(error.message));
    // 这里可以加重试逻辑，比如失败后隔几秒再试，或者直接抛出错误提示用户
  }
}

export function* watchConfigLoad() {
  yield takeLatest(CONFIG_LOAD_REQUEST, loadConfigSaga);
}

3. 核心：前置Action拦截器Saga #

这部分是关键——我们要监听所有需要前置配置的业务Action，在处理前阻塞等待配置加载完成：

// sagas/globalSaga.js
import { take, put, call, select, fork, cancel } from 'redux-saga/effects';
import { loadConfig, CONFIG_LOAD_SUCCESS, CONFIG_LOAD_FAILURE } from '../actions/config';
import { getConfigState } from '../selectors'; // 这个selector用来获取store里的配置状态

// 把需要前置加载配置的业务Action都列在这里，比如['USER_FETCH', 'PRODUCT_LIST_LOAD']
const REQUIRES_CONFIG_ACTIONS = ['YOUR_BUSINESS_ACTION_1', 'YOUR_BUSINESS_ACTION_2'];

function* handleActionWithConfig(action) {
  // 先检查配置是否已经加载完成
  const configState = yield select(getConfigState);
  
  if (!configState.data) {
    // 如果没加载，先触发配置加载请求
    const loadTask = yield fork(loadConfig);
    
    // 阻塞在这里，直到配置加载成功或失败
    const resultAction = yield take([CONFIG_LOAD_SUCCESS, CONFIG_LOAD_FAILURE]);
    
    if (resultAction.type === CONFIG_LOAD_FAILURE) {
      // 配置加载失败的话，可以选择取消原Action的处理，或者做错误提示
      yield cancel(loadTask);
      // 可选：dispatch一个全局错误提示的Action
      return;
    }
  }
  
  // 配置已经就绪，放行原Action（或者直接在这里调用原Action的处理Saga）
  yield put(action);
}

export function* globalSaga() {
  // 持续监听需要前置配置的Action
  while (true) {
    const action = yield take(REQUIRES_CONFIG_ACTIONS);
    // 调用拦截处理逻辑，这里是阻塞式的，处理完才会继续监听下一个Action
    yield call(handleActionWithConfig, action);
  }
}

4. 整合所有Sagas #

最后在根Saga里把这些Saga都启动起来：

// sagas/rootSaga.js
import { all } from 'redux-saga/effects';
import { watchConfigLoad } from './configSaga';
import { globalSaga } from './globalSaga';
// 导入你的其他业务Sagas
import { watchUserActions } from './userSaga';

export default function* rootSaga() {
  yield all([
    watchConfigLoad(),
    globalSaga(),
    watchUserActions(),
    // ...其他业务Sagas
  ]);
}

几个关键细节要注意 #

• 阻塞式保障：通过take([CONFIG_LOAD_SUCCESS, CONFIG_LOAD_FAILURE])实现阻塞，确保配置加载完成后才会处理原Action。
• 避免重复请求：每次拦截Action都会先检查配置是否已存在，不会重复发起服务端请求。
• 错误容错：如果配置加载失败，可以灵活处理——比如终止原Action，或者提示用户刷新页面。
• 扩展性强：只要修改REQUIRES_CONFIG_ACTIONS数组，就能快速添加/移除需要前置配置的Action，不用改核心逻辑。

如果你的现有globalSaga已经有其他监听逻辑，直接把这个拦截器的while(true)循环整合进去就行，完全兼容现有代码。

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