JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

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

JavaScript

const initState = {
	init: true
};

const actionTypes = {
	changeUserName: '[USER] updateName'
}

const actions = {
	changeUserName: (payload) => {
  	return {
    	'type': actionTypes.changeUserName,
      'payload': paylod
    }
  }
}

const reducers = {
	user: (state, action) => {
    console.log('user!!!', state, action);
  }
}

const streams = {
	user : new rxjs.Subject({'name': 'initName'})
}

console.log('actionTypes', actionTypes, 'actions', actions, 'reducers', reducers);

const store = new rxjs.BehaviorSubject(initState)
	 // .pipe( () => rxjs.merge(...Object.values(streams) ))
//	.pipe( () => rxjs.operators.scan((acc, curr) => acc) )
  .pipe(
  	// rxjs.operators.scan((a, c) => [...a, c], []),
    rxjs.operators.scan((acc, curr) => acc, {}),
    rxjs.operators.map(r => r[Math.floor(Math.random() * r.length)])
  )
  .subscribe((state) => {
		console.log('state', state);
	});
  // .subscribe(console.log);

/*
store.subscribe((state) => {
	console.log('state', state);
});
*/


console.log('val: ', store);


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

delayFn(() => {
	console.log('one second later');
	// 	streams.user.next({'name': 'nexter'});
  store.next({ 'user': {'name': 'nexter'} });
//  console.log('in delay', store.value);
	
}, 1000);
  
/**
 * 
 */
function MyStore (initState, reducers) {
  const store = new Rx.BehaviorSubject(initState) 				      // main store stream seeded with state
    // .merge(...Object.values(streams)) 							          // merge all reducers into single stream
    // .scan((state, reducer) => reducer(state))
}