import React from 'react'

import { merge, Subject} from "rxjs";
import { map } from "rxjs/operators";
import { createStore } from 'react-rxjs';
import { useStore } from 'react-rxjs-hook'

const inc$ = new Subject();
const dec$ = new Subject();

const reducer$ = merge(
    inc$.pipe(map(() => (state) => state + 1)),
    dec$.pipe(map(() => (state) => state - 1))
);

const store$ = createStore("test", reducer$, 0);

const Counter = () => {
  const state = useStore(store$);
  return (
    <div>
      {state}
      <button onClick={() => inc$.next()}>+</button>
      <button onClick={() => dec$.next()}>-</button>
    </div>
  )
}