Как использовать React + Context API + useReducer Hook + Rx JS наблюдаемые для фильтрации каждого типа действия и выполнения других действий асинхронно + LIVE DEMO

Question

У меня есть небольшой компонент React, использующий хук useReducer. Он имеет только 2 функции:

• A) Для увеличения
• B) Для уменьшения

Короче говоря, я хотел бы сделать несколько асин c действий для каждого из вышеуказанных действий. Поэтому, когда пользователь нажимает кнопку увеличения, запускаются действия (loadingStart, incrementDo и затем loadingStop), то же самое для уменьшения.

Я знаю, это звучит излишне для такого крошечного компонента, тем не менее его цель для меня - изучить Rx JS лучше, если применить это на практике.

Промежуточное программное обеспечение для отправки запускается при каждом срабатывании действия, я собрал что-то вместе, используя BehaviorSubject, однако нажатие на увеличение и уменьшение только запускает нужные действия для каждого в консольном журнале, но не в компоненте.

Вот то, что я получаю в консоли, нажимая на приращение,

{payload: undefined, type: "LOADING_START"}
{payload: undefined, type: "INCREMENT_DO"}
{payload: undefined, type: "LOADING_STOP"}

{payload: undefined, type: "LOADING_START"}
{payload: undefined, type: "DECREMENT_DO"}
{payload: undefined, type: "LOADING_STOP"}

Кажется, что одновременно запускаются действия как увеличения, так и уменьшения.

ПРИМЕЧАНИЕ. Если мы закомментируем actionDecrement $ из промежуточного программного обеспечения ниже, действие приращения будет работать нормально! Проблема, которую я имею, состоит в том, чтобы заставить оба этих наблюдаемых работать ...

Вот промежуточное программное обеспечение Rx JS, которое принимает аргумент в качестве аргумента: -

const actionIncrement$ = new BehaviorSubject();
const actionDecrement$ = new BehaviorSubject();


const middleware = dispatch => () => {
    actionIncrement$.pipe(
        filter(({ type }) => type === INCREMENT),
        mapTo(
            dispatch(loadingStart()),
            dispatch(incrementDo()),
            dispatch(loadingStop()),
        ),
    );

    actionDecrement$.pipe(
        filter(({ type }) => type === DECREMENT),
        mapTo(
            dispatch(loadingStart()),
            dispatch(decrementDo()),
            dispatch(loadingStop()),
        ),
    );
};

Live версия : https://codesandbox.io/s/romantic-chaum-jlcdy?file= / src / contexts / Counter / middleware. js

Может кто-нибудь направить или показать мне, где я ошибаюсь, есть множество примеров React-Redux из там, но не один с React и его новой функцией ловушек.

Любая помощь очень ценится.