stvkoch/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

<script id="jsbin-javascript">
'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var prod1 = { id: 1, name: 'test1' };
var prod2 = { id: 2, name: 'test2' };

var state = {};

var addProd = function addProd($action, state) {
  return $action.filter(function (a) {
    return a.type == 'ADD';
  }).switchMap(function (a) {
    return Rx.Observable.of(a.type);
  }).concat(Rx.Observable.interval(1000).take(4)).map(function (a) {
    return newState({ a: a });
  });
};

var rmProd = function rmProd($action, state) {
  return $action.filter(function (a) {
    return a.type == 'REMOVE';
  }).delay(2000).map(function (a) {
    return newState([]);
  });
};

var newState = function newState(state) {
  return { type: 'STATE', state: state };
};

var createReactive = function createReactive(epics) {
  return new Rx.Subject().switchMap(function (payload) {
    var _Rx$Observable;

    return (_Rx$Observable = Rx.Observable).merge.apply(_Rx$Observable, _toConsumableArray(epics.map(function (f) {
      return f(Rx.Observable.of(payload.action), payload.state);
    })));
  }).filter(function (a) {
    return a.type == 'STATE';
  });
};

var r = createReactive([addProd, rmProd]);

r.subscribe(function (a) {
  console.log('rx', a);
});

var $action = function $action(action) {
  return r.next({ action: action, state: state });
};

$action({ type: 'ADD', product: prod1 });

$action({ type: 'REMOVE', product: prod2 });
</script>


<script id="jsbin-source-javascript" type="text/javascript">const prod1 = {id:1, name: 'test1'};
const prod2 = {id:2, name: 'test2'};

let state = {};


const addProd = ($action, state) => {
  return $action
    .filter(a => a.type=='ADD')
    .switchMap(a => Rx.Observable.of(a.type))
    .concat(Rx.Observable.interval(1000).take(4))
    .map(a=> newState({a}))
};


const rmProd = ($action, state) => {
  return $action
    .filter(a => a.type=='REMOVE')
    .delay(2000)
    .map(a=> newState([]))
};


const newState = (state) => ({type: 'STATE', state});

const createReactive = (epics) => new Rx.Subject()
  .switchMap(
    payload => Rx.Observable.merge(
      ...epics.map(f => f(Rx.Observable.of(payload.action), payload.state))
    )
  ).filter(a=>a.type=='STATE');

const r = createReactive([
  addProd,
  rmProd
]);

r.subscribe( (a) => {
  console.log('rx', a);
});

const $action = (action) => r.next({action, state});


$action({type: 'ADD', product: prod1});

$action({type: 'REMOVE', product: prod2});

</script></body>
</html>

## jsbin.dozakojici.js
'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var prod1 = { id: 1, name: 'test1' };
var prod2 = { id: 2, name: 'test2' };

var state = {};

var addProd = function addProd($action, state) {
  return $action.filter(function (a) {
    return a.type == 'ADD';
  }).switchMap(function (a) {
    return Rx.Observable.of(a.type);
  }).concat(Rx.Observable.interval(1000).take(4)).map(function (a) {
    return newState({ a: a });
  });
};

var rmProd = function rmProd($action, state) {
  return $action.filter(function (a) {
    return a.type == 'REMOVE';
  }).delay(2000).map(function (a) {
    return newState([]);
  });
};

var newState = function newState(state) {
  return { type: 'STATE', state: state };
};

var createReactive = function createReactive(epics) {
  return new Rx.Subject().switchMap(function (payload) {
    var _Rx$Observable;

    return (_Rx$Observable = Rx.Observable).merge.apply(_Rx$Observable, _toConsumableArray(epics.map(function (f) {
      return f(Rx.Observable.of(payload.action), payload.state);
    })));
  }).filter(function (a) {
    return a.type == 'STATE';
  });
};

var r = createReactive([addProd, rmProd]);

r.subscribe(function (a) {
  console.log('rx', a);
});

var $action = function $action(action) {
  return r.next({ action: action, state: state });
};

$action({ type: 'ADD', product: prod1 });

$action({ type: 'REMOVE', product: prod2 });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

	<script id="jsbin-javascript">
	'use strict';

	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

	var prod1 = { id: 1, name: 'test1' };
	var prod2 = { id: 2, name: 'test2' };

	var state = {};

	var addProd = function addProd($action, state) {
	return $action.filter(function (a) {
	return a.type == 'ADD';
	}).switchMap(function (a) {
	return Rx.Observable.of(a.type);
	}).concat(Rx.Observable.interval(1000).take(4)).map(function (a) {
	return newState({ a: a });
	});
	};

	var rmProd = function rmProd($action, state) {
	return $action.filter(function (a) {
	return a.type == 'REMOVE';
	}).delay(2000).map(function (a) {
	return newState([]);
	});
	};

	var newState = function newState(state) {
	return { type: 'STATE', state: state };
	};

	var createReactive = function createReactive(epics) {
	return new Rx.Subject().switchMap(function (payload) {
	var _Rx$Observable;

	return (_Rx$Observable = Rx.Observable).merge.apply(_Rx$Observable, _toConsumableArray(epics.map(function (f) {
	return f(Rx.Observable.of(payload.action), payload.state);
	})));
	}).filter(function (a) {
	return a.type == 'STATE';
	});
	};

	var r = createReactive([addProd, rmProd]);

	r.subscribe(function (a) {
	console.log('rx', a);
	});

	var $action = function $action(action) {
	return r.next({ action: action, state: state });
	};

	$action({ type: 'ADD', product: prod1 });

	$action({ type: 'REMOVE', product: prod2 });
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const prod1 = {id:1, name: 'test1'};
	const prod2 = {id:2, name: 'test2'};

	let state = {};


	const addProd = ($action, state) => {
	return $action
	.filter(a => a.type=='ADD')
	.switchMap(a => Rx.Observable.of(a.type))
	.concat(Rx.Observable.interval(1000).take(4))
	.map(a=> newState({a}))
	};


	const rmProd = ($action, state) => {
	return $action
	.filter(a => a.type=='REMOVE')
	.delay(2000)
	.map(a=> newState([]))
	};



	const newState = (state) => ({type: 'STATE', state});

	const createReactive = (epics) => new Rx.Subject()
	.switchMap(
	payload => Rx.Observable.merge(
	...epics.map(f => f(Rx.Observable.of(payload.action), payload.state))
	)
	).filter(a=>a.type=='STATE');

	const r = createReactive([
	addProd,
	rmProd
	]);

	r.subscribe( (a) => {
	console.log('rx', a);
	});

	const $action = (action) => r.next({action, state});







	$action({type: 'ADD', product: prod1});

	$action({type: 'REMOVE', product: prod2});

	</script></body>
	</html>