title: How to use React + Context API + useReducer Hook + RxJS observables to filter each action type and perform other actions asynchronously + LIVE DEMO
body: <p>I've a little counter React component which uses useReducer hook. It only has 2 functionality,</p>
  
  <ul>
  <li>A) To increment</li>
  <li>B) To decrement</li>
  </ul>
  
  <p>Long story short, I would like to make multiple async actions for each one of the above actions. So when the user clicks on increment button, fire off (loadingStart, incrementDo and then loadingStop) actions, same for decrement.</p>
  
  <p>I know it sounds an overkill for such tiny component, nonetheless its purpose for me to learn RxJS better by putting it int practice.</p>
  
  <p>The dispatch middleware gets trigger every time an action gets fired, I've put something together utilising BehaviorSubject, however clicking both increment and decrement only fires the desired actions for each in console log, but not in the component.</p>
  
  <p>Here is what I get in console hitting increment,</p>
  
  <pre><code>{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"}
  </code></pre>
  
  <p>It also seems firing both the increments and decrements action at the same time.</p>
  
  <p>NOTE: If we comment out the <strong>actionDecrement$</strong> from the middleware below, the increment action works fine! The problem I'm having is to get both of these observable working...</p>
  
  <p>Here is the RxJS middleware which takes dispatch as its argument:-</p>
  
  <pre><code>const actionIncrement$ = new BehaviorSubject();
  const actionDecrement$ = new BehaviorSubject();
  
  
  const middleware = dispatch =&gt; () =&gt; {
      actionIncrement$.pipe(
          filter(({ type }) =&gt; type === INCREMENT),
          mapTo(
              dispatch(loadingStart()),
              dispatch(incrementDo()),
              dispatch(loadingStop()),
          ),
      );
  
      actionDecrement$.pipe(
          filter(({ type }) =&gt; type === DECREMENT),
          mapTo(
              dispatch(loadingStart()),
              dispatch(decrementDo()),
              dispatch(loadingStop()),
          ),
      );
  };
  </code></pre>
  
  <p>Live version: <a href="https://codesandbox.io/s/romantic-chaum-jlcdy?file=/src/contexts/Counter/middleware.js" rel="nofollow noreferrer">https://codesandbox.io/s/romantic-chaum-jlcdy?file=/src/contexts/Counter/middleware.js</a></p>
  
  <p>Could someone direct or show me where I'm going wrong, there are plenty of React-Redux example out there, but not a single one with just React and its new hooks feature.</p>
  
  <p>Any help is much appreciated.</p>