是否可以使用redux工具包listenerMiddleware同时监听状态变化和动作

Question

我需要触发相同的功能两次。一次在某个 redux 状态更改后，一次在完成 redux 操作后。目前我使用两个单独的监听器。但我想知道是否可以将“谓词”和“actionCreator”组合到一个侦听器中。但我没能成功。

监听器中间件文档供参考：https://redux-toolkit.js.org/api/createListenerMiddleware

当前实施（工作正常）：

export const addTemperatureAlertListener2 = (
  startListening: AppStartListening
) => {
  startListening({
    predicate: (action, currentState, originalState) => {
      return (
        currentState.chart.yLimits.yMax !== originalState.chart.yLimits.yMax ||
        currentState.chart.yLimits.yMin !== originalState.chart.yLimits.yMin ||
        currentState.user.tConfig.alertHigherThreshold !==
          originalState.user.tConfig.alertHigherThreshold
      );
    },
    effect: (action, listenerApi) => {
      temperatureAlertEffect(action, listenerApi);
    },
  });
};
export const addTemperatureAlertListener1 = (
  startListening: AppStartListening
) => {
  startListening({
    actionCreator: createPatchRecord.fulfilled,
    effect: (action, listenerApi) => {
      temperatureAlertEffect(action, listenerApi);
    },
  });
};

我尝试过但没有成功：

export const addTemperatureAlertListener = (
  startListening: AppStartListening
) => {
  startListening({
    actionCreator: createPatchRecord.fulfilled,
    predicate: (action, currentState, originalState) => {
      return (
        currentState.chart.yLimits.yMax !== originalState.chart.yLimits.yMax ||
        currentState.chart.yLimits.yMin !== originalState.chart.yLimits.yMin ||
        currentState.user.tConfig.alertHigherThreshold !==
          originalState.user.tConfig.alertHigherThreshold
      );
    },
    effect: (action, listenerApi) => {
      temperatureAlertEffect(action, listenerApi);
    },
  });
};

Answer 1

我想知道是否可以将“谓词”和“actionCreator”组合到一个侦听器中。

不，您不能合并侦听器。详情请参阅开始聆听。

您必须准确提供四个选项中的一个来决定侦听器何时运行：

type

、

actionCreator

、

matcher

或

predicate

。

这意味着每个监听器中间件只能选择上述之一和

effect

回调。

您可以做的就是“部分”合并它们，即实例化两个侦听器的单个函数。

export const addTemperatureAlertListener = (
  startListening: AppStartListening
) => {
  const effect = (action, listenerApi) => {
    temperatureAlertEffect(action, listenerApi);
  };

  startListening({
    predicate: (action, currentState, originalState) => {
      return (
        currentState.chart.yLimits.yMax !== originalState.chart.yLimits.yMax ||
        currentState.chart.yLimits.yMin !== originalState.chart.yLimits.yMin ||
        currentState.user.tConfig.alertHigherThreshold !==
          originalState.user.tConfig.alertHigherThreshold
      );
    },
    effect,
  });

  startListening({
    actionCreator: createPatchRecord.fulfilled,
    effect,
  });
};