Get started with reflux CDN
BSD-3-Clause licensed
Reflux: library offering a central store for app state in Flux design.
Tags:- reflux
- react
- flux
- architecture
- dataflow
- action
- event
- data
Stable version
Copied!
How to start using reflux CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with reflux CDN - cdnhub.io</title>
<script src="https://cdn.cdnhub.io/reflux/6.4.1/reflux.min.js"></script>
</head>
<body>
<button id="increment">Increment</button>
<p id="counter">0</p>
<script>
const Rx = require('rxjs');
const CounterStore = {
counter: Rx.BehaviorSubject(0),
increment: () => {
this.counter.next(this.counter.value + 1);
},
};
const CounterActions = {
increment: () => ({ type: 'INCREMENT' }),
};
const CounterActionsCreators = {
increment: () => (dispatch) => {
CounterStore.increment();
dispatch(CounterActions.increment());
},
};
const CounterActionsStream = Rx.Observable.create((observer) => {
const subscription = Rx.Observable.from(reflux.observable(CounterStore).map('counter'))
.subscribe(observer);
return () => subscription.unsubscribe();
});
const CounterActionsDispatcher = Rx.merge(
Rx.Observable.fromEvent(document.getElementById('increment'), 'click')
.map(() => CounterActions.increment())
);
const CounterActionsSubscriptions = Rx.Observable.merge(
CounterActionsStream,
CounterActionsDispatcher
)
.subscribe((action) => {
CounterStore.increment();
document.getElementById('counter').textContent = CounterStore.counter.value;
});
document.getElementById('increment').click();
</script>
</body>
</html>
Copied!
Copied!