Really little rsjs state manager

by amindunited

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.2/rxjs.umd.min.js"></script>
<h1>
  RxState Example
</h1>

<h3>
  Count:
</h3>

<count>
  
</count>
<hr/>
<button id="incrementButton">
  Increment
</button>

<button id="decrementButton">
  Decrement
</button>

CSS

cv

JavaScript

const BehaviorSubject = rxjs.BehaviorSubject;
const Subject = rxjs.Subject;
const scan = rxjs.operators.scan;
const map = rxjs.operators.map;

const delayFn = (fn, delay) => {
	setTimeout(fn, delay);
}


/**
 * New Store Idea:
 */
const createStore = (initValue) => {
	let store$ = new BehaviorSubject(Object.assign({}, initValue));
  const store = {
  	setState: (state) => {
	    store$.next(Object.assign({}, store$.value, state));
    },
    getState: () => {
    	return store$.value;
    },
    connect: (fn) => {
    	return store$.subscribe(fn);
    }
  }
  return store;
}

const myStore = createStore({'cow': 'moo', count: 0});
const connection = mooStore.connect((state)=>{
	console.log('New Store Idea: ',state);
  document.querySelector('count').innerHTML = state.count;
});


delayFn(() => {
	myStore.setState({
  	count: myStore.getState().count += 1
  })
}, 1000);

delayFn(() => {
	myStore.setState({
  	count: myStore.getState().count += 1,
    cow:'Extra Moo!'
  })
}, 3000);

 const increment = () => {
 	myStore.setState({ count : myStore.getState().count += 1 })
 }
 
 const decrement = () => {
 	myStore.setState({ count : myStore.getState().count -= 1 })
 }
 
 document
 	.querySelector('#incrementButton')
  .addEventListener('click', (e) => {
  	increment();
  });
  
document
 	.querySelector('#decrementButton')
  .addEventListener('click', (e) => {
  	decrement();
  });


/**
 * Console Demo
 */
let secondConnect;
delayFn(() => {
	secondConnect = myStore.connect((state)=>{console.log('second listener: ',state);});
}, 2000);


delayFn(() => {
	myStore.setState({
  	count: myStore.getState().count += 1
  })
}, 2000);


delayFn(() => {
	console.log('disoncced');
	secondConnect.unsubscribe();
}, 2500);


delayFn(() => {
	myStore.setState({
  	count: myStore.getState().count += 99
  })
}, 3000);