RxJS store idea

by amindunited

HTML

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

JavaScript

// Initial State
const initState = { count: 0 };

// STORE


// ACTION
// action name
const action_types = {
	'INCREMENT': 'INCREMENT',
  'DECRACREMENT': 'DECRACREMENT'
}

// action function 


// REDUCER
const reducers = (state, action) => {  
  switch(action.type) {
    case action_types.INCREMENT:
    	console.log('increment it', state, action);
      return {
        ...state,
        name: action.payload
      };
    case action_types.DECRACREMENT:
      return {
        ...state,
        name: action.payload
      };
    default:
      return state;
  }
}

// STORE
const _store = new rxjs.BehaviorSubject(initState)
const store$ = _store.pipe((val) => {
	console.log('val', val); return val
}, (val2) => { console.log('val2', val2); return val2; });

console.log('subject : ', store$);

const actionDispatcher = (func) => (...args) => {
	console.log('action Disp ', func, ...args);
  store$.next(func(...args));
}
  
// Example action function
const increment = actionDispatcher((payload) => ({  
  type: action_types.INCREMENT,
  payload
}));


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

delayFn(() => increment({count: 97}), 100);
delayFn(() => increment({count: 98}), 500);
delayFn(() => increment({count: 99}), 1000);
delayFn(() => increment({count: 100}), 1500);

const reducer_one = (data) => {
	console.log('data!!! ', data);
  return data;
	return Object.assign({}, data, {'reducer_one': true});
}

const reducer_two = (data) => {
	return Object.assign({}, data, {'reducer_two': true});
}

const reducerses = [reducer_one, reducer_two];

store$.pipe(reducer_one).subscribe((data) => {
	console.log('YES! ', data );
});