Published
Edited
Oct 17, 2019
Insert cell
Insert cell
Insert cell
observeRx(
Rx.from([1, 2, 3, 4])
)
Insert cell
observeRx(
Rx.interval(1000)
)
Insert cell
observeRx(
Rx.interval(500).pipe(Rx.operators.take(5))
);
Insert cell
{
const obs = Rx.interval(500).pipe(
Rx.operators.take(5),
Rx.operators.map(x => `obs value ${x}`),
);
obs.subscribe(value => console.log(`observer 1 received ${value}`));
obs.subscribe(value => console.log(`observer 2 received ${value}`));
return observeRx(obs);
}
Insert cell
Insert cell
{
const userObservable = Rx.ajax.ajax.getJSON('https://api.github.com/users/Kenoby-Labs');
const getRepositories = Rx.operators.flatMap(user => Rx.ajax.ajax.getJSON(user.repos_url));
const getRepositiesForks = Rx.operators.concatAll(repositories => {
// console.log(repositories.map(repository => repository.forks_url))
return repositories.map(repository => Rx.ajax.ajax.getJSON(repository.forks_url))
});
const obs = userObservable.pipe(
getRepositories,
getRepositiesForks,
Rx.operators.tap(console.log),
)

return observeRx(obs)
}
Insert cell
Insert cell
function RxReduxStore(initial_state, reducers) { // pass in state and action functions
let streams = {}, actions = {}, store$
for (let action in reducers) { // pass in reducers keyed by action name
let subject$ = new Rx.Subject() // subject for action/reducer data flow
streams[`${action}$`] = subject$.pipe(Rx.operators.map(reducers[action])) // stash a reducer mapped to a stream
actions[action] = (args) => subject$.next(args) // forward action params to reducer stream
}

store$ = new Rx.BehaviorSubject(initial_state) // main store stream seeded with state
.pipe(
Rx.operators.merge(...Object.values(streams)), // merge all reducers into single stream,
Rx.operators.scan((state, reducer) => reducer(state)) // pass state to each reducer
)

return {store$, actions} // return store observable and action streams
}
Insert cell
CountStore = RxReduxStore(0, {
increment: (amount = 1) => count => count + amount,
decrement: (amount = 1) => count => count - amount,
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more