Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Is it possible to listen for a state change and action at the same time with the redux toolkit listenerMiddleware

I need to trigger the same function two times. Once after a certain redux state changed and once after a redux action is fulfilled. Currently i use two separate listeners for it. But i was wondering if it is possible to combine the "predicate" and the "actionCreator" into one listener. But i was not able to make it work.

listener middleware docs for reference: https://redux-toolkit.js.org/api/createListenerMiddleware

Current implementation (works fine):

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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);
    },
  });
};

What i tried but did not work:

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);
    },
  });
};

>Solution :

I was wondering if it is possible to combine the "predicate" and the "actionCreator" into one listener.

No, you cannot merge the listeners. See startListening for details.

You must provide exactly one of the four options for deciding when the listener will run: type, actionCreator, matcher, or predicate.

This means each listener middleware can only select one of the above and the effect callback.

What you might be able to do is to "partially" merge them, i.e. a single function that instantiates both listeners.

export const addTemperatureAlertListener = (
  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: temperatureAlertEffect,
  });

  startListening({
    actionCreator: createPatchRecord.fulfilled,
    effect: temperatureAlertEffect,
  });
};
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading