Shared state between components

app.js

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
}

@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