Created
October 18, 2016 23:00
-
-
Save geovanisouza92/777e2ec80139cbd75890889197f2aa60 to your computer and use it in GitHub Desktop.
Shared state between components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {div, input} from '@cycle/dom' | |
import isolate from '@cycle/isolate' | |
import xs from 'xstream' | |
import {assoc} from 'ramda' | |
function Form (sources) { | |
const billingAddressChange$ = sources.DOM | |
.select('.billing-address').events('input') | |
.map(ev => ev.target.value) | |
.startWith('') | |
const vtree$ = xs.of( | |
div('.form', [ | |
input('.billing-address') | |
]) | |
) | |
const sinks = { | |
DOM: vtree$, | |
billingAddressChange$ | |
} | |
return sinks | |
} | |
function Another (sources) { | |
const vtree$ = sources.billingAddress$ | |
.map(billingAddress => | |
div(billingAddress) | |
) | |
const sinks = { | |
DOM: vtree$ | |
} | |
return sinks | |
} | |
export function App (sources) { | |
const form = isolate(Form)(sources) | |
const anotherSources = assoc('billingAddress$', form.billingAddressChange$, sources) | |
const another = isolate(Another)(anotherSources) | |
const vtree$ = xs.combine(form.DOM, another.DOM) | |
.map(([formVtree, anotherVtree]) => | |
div('.parent', [ | |
formVtree, | |
anotherVtree | |
]) | |
) | |
const sinks = { | |
DOM: vtree$ | |
} | |
return sinks | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@geovanisouza92 Cool thanks for the example, without yet having read what isolate does (seems to be an immutable clone of sorts), the idea seems to be that the
Form
component "exports" it data change stream (billingAddressChange$
) so it can be picked up by a parent component for example, then this one simply passes it to whatever component needs it as a source right?So in this architecture there is no global state, each component owns it's state, and components generate whatever they need based on their input streams? Seems interesting, although seems to lack an easy way to see the overall state of the application