如何在Redux中响应派生状态变化并触发指定Action？

1. 自定义中间件监听状态更新 #

这是最直接的纯Redux原生方案，通过中间件拦截每次action dispatch后的状态变更，对比派生状态的前后值来决定是否触发目标action。

• 实现步骤：
  • 编写自定义中间件，在执行next(action)后获取更新后的全局状态
  • 用目标selector计算当前派生状态，和缓存的上一次状态值对比
  • 若值发生变化，直接dispatch对应的目标action
  • 缓存最新的派生状态，避免重复触发

示例代码：

const derivedStateMiddleware = store => {
  // 初始化缓存的派生状态
  let prevDerivedValue = selectYourDerivedState(store.getState());
  
  return next => action => {
    const dispatchResult = next(action);
    const currentState = store.getState();
    const currDerivedValue = selectYourDerivedState(currentState);
    
    // 注意：若派生状态是引用类型，需用深对比或immutable结构判断变化
    if (currDerivedValue !== prevDerivedValue) {
      store.dispatch(yourTargetAction(currDerivedValue));
      prevDerivedValue = currDerivedValue;
    }
    
    return dispatchResult;
  };
};

// 将中间件加入store配置
const store = createStore(
  rootReducer,
  applyMiddleware(derivedStateMiddleware)
);

• 优势：无需修改任何现有action creator或reducer，新增action时自动覆盖，不会遗漏；完全在Redux内部运行，与React解耦。

2. 基于Redux Toolkit的Listener Middleware（推荐） #

如果项目使用Redux Toolkit，官方提供的Listener Middleware是专门处理状态变化副作用的方案，比自定义中间件更规范便捷。

示例代码：

import { createListenerMiddleware } from '@reduxjs/toolkit';

const listenerMiddleware = createListenerMiddleware();

// 添加状态变化监听器
listenerMiddleware.startListening({
  // 判断派生状态是否变化的逻辑
  predicate: (_, currentState, prevState) => {
    const prevDerived = selectYourDerivedState(prevState);
    const currDerived = selectYourDerivedState(currentState);
    return prevDerived !== currDerived;
  },
  // 状态变化后执行的副作用
  effect: (_, listenerApi) => {
    const currDerived = selectYourDerivedState(listenerApi.getState());
    listenerApi.dispatch(yourTargetAction(currDerived));
  },
});

// 配置store
const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
});

• 优势：官方维护的标准方案，内置状态对比逻辑，支持异步操作等复杂需求，代码可读性更高。

3. Redux Saga监听全局状态变化 #

如果项目已集成Redux Saga，可以通过saga监听所有action，每次action执行后检查派生状态是否变化。

示例代码：

import { takeEvery, select, put } from 'redux-saga/effects';

function* watchDerivedStateChange() {
  let prevDerivedValue = yield select(selectYourDerivedState);
  
  // 监听所有action，每次dispatch后检查状态
  yield takeEvery('*', function* () {
    const currDerivedValue = yield select(selectYourDerivedState);
    if (currDerivedValue !== prevDerivedValue) {
      yield put(yourTargetAction(currDerivedValue));
      prevDerivedValue = currDerivedValue;
    }
  });
}

// 在根saga中启动监听
export default function* rootSaga() {
  yield all([
    watchDerivedStateChange(),
    // 其他业务saga...
  ]);
}

• 优势：适配已有Redux Saga的项目，支持更复杂的异步逻辑（比如状态变化后等待前置条件再触发action）。

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