How to share state between sibling components about cycle-onionify HOT 18 CLOSED

function main(sources) {
  const rangePickerSources = {
    DOM: sources.DOM.isolateSource(sources.DOM, 'RangePicker'),
    HTTP: sources.HTTP.isolateSource(sources.HTTP, 'RangePicker'),
    onion: sources.onion.isolateSource(sources.onion, 'range'),
  };
  const rangePickerSinks = RangePicker(rangePickerSources);
  const isolatedRangePickerSinks = {
    DOM: sources.DOM.isolateSource(rangePickerSinks, 'RangePicker'),
    HTTP: sources.HTTP.isolateSource(rangePickerSinks, 'RangePicker'),
    onion: sources.onion.isolateSource(rangePickerSinks, 'range'),
  };

  const fromSources= {
    DOM: sources.DOM.isolateSource(sources.DOM, 'From'),
    HTTP: sources.HTTP.isolateSource(sources.HTTP, 'From'),
    onion: sources.onion.isolateSource(sources.onion, 'range'),
  };
  const fromSinks = From(fromSources);
  const isolatedFromSinks = {
    DOM: sources.DOM.isolateSource(fromSinks, 'From'),
    HTTP: sources.HTTP.isolateSource(fromSinks, 'From'),
    onion: sources.onion.isolateSource(fromSinks, 'range'),
  };

  const toSources= {
    DOM: sources.DOM.isolateSource(sources.DOM, 'To'),
    HTTP: sources.HTTP.isolateSource(sources.HTTP, 'To'),
    onion: sources.onion.isolateSource(sources.onion, 'range'),
  };
  const toSinks = To(toSources);
  const isolatedToSinks = {
    DOM: sources.DOM.isolateSource(toSinks, 'To'),
    HTTP: sources.HTTP.isolateSource(toSinks, 'To'),
    onion: sources.onion.isolateSource(toSinks, 'range'),
  };

  // ... combine child sinks together

  return sinks;
}

function main(sources) {
  const chooseRangePickerScope = key =>
    key === 'onion' ? 'range' : 'RangePicker';
  const rangePickerSinks = isolate(RangePicker, chooseRangePickerScope)(sources);

  const chooseFromScope = key =>
    key === 'onion' ? 'range' : 'From';
  const fromSinks = isolate(From, chooseFromScope)(sources);

  const chooseToScope = key =>
    key === 'onion' ? 'range' : 'To';
  const toSinks = isolate(To, chooseFromScope)(sources);

  // ... combine child sinks together

  return sinks;
}

function main(sources) {
  const childrenSources = {
    ...sources,
    state: sources.onion.isolateSource(sources.onion, 'range').state$,
  };

  const rangePickerSinks = isolate(RangePicker)(childrenSources);
  const fromSinks = isolate(From)(childrenSources);
  const toSinks = isolate(To)(childrenSources);

  const childrenReducer$ = xs.merge(
    sources.onion.isolateSink(rangePickerSinks.onion, 'range'),
    sources.onion.isolateSink(fromSinks.onion, 'range'),
    sources.onion.isolateSink(toSinks.onion, 'range')
  );

  // ... combine child sinks together

  return sinks;
}

  const fromSinks = isolate(From)(childrenSources);

  const childrenReducer$ = xs.merge(
    sources.onion.isolateSink(fromSinks.onion, 'range')
  );

import { run }                              from '@cycle/xstream-run';
import { button, div,
            makeDOMDriver }                 from '@cycle/dom';
import xs                                   from 'xstream';
import isolate                              from '@cycle/isolate';
import onionify                             from 'cycle-onionify';


function Double(sources) {

    // This component should:
    // 1. take data from Increment,
    // 2. double it and store it as state ({ value })
    // 3. displays result

    // What is recommend way to do that with onionify?

    const state$        = sources.onion.state$;
    const fnInit$       = xs.of(() => ({ value : 0 }));
    const reducer$      = xs.merge(fnInit$);
    const vdom$         = state$
                            .map(state => div([
                                div('Double : ' + state.value.toString()),
                            ]));

    return {
        DOM     : vdom$,
        onion   : reducer$
    }


}

function Incrementer(sources) {

    const state$        = sources.onion.state$;
    const action$       = sources.DOM
                            .select('.inc')
                            .events('click');

    const fnInit$       = xs.of(() => ({ count : 0 }));
    const fnInc$        = action$.mapTo(state => ({ count : state.count + 1 }));
    const reducer$      = xs.merge(fnInit$, fnInc$);
    const vdom$         = state$.map(state => div([
                                    div(state.count.toString()),
                                    button('.inc', '+')
                            ]));

    return {
        DOM     : vdom$,
        onion   : reducer$
    }

}



function main(sources) {

    const state$            = sources.onion.state$;

    const fnInit$           = xs.of(() => ({ }));
    const incrementer       = isolate(Incrementer, 'inc')(sources);
    const double            = isolate(Double, 'double')(sources);

    const reducer$          = xs.merge(fnInit$, incrementer.onion, double.onion);

    const vdom$             = xs.combine(state$, incrementer.DOM, double.DOM)
                                .map(([ state, incrementer, double ]) => div([
                                    incrementer,
                                    double,
                                    div(JSON.stringify(state)),

                                ]));

    return {
        DOM: vdom$,
        onion: reducer$,
    };
}


const wrappedMain   = onionify(main);

run(wrappedMain, {
    DOM: makeDOMDriver('#app')
});

function main(sources) {

    const state$            = sources.onion.state$;

    const fnInit$           = xs.of(() => ({ }));
    const incrementer       = isolate(Incrementer, 'inc')(sources);
    const count$            = state$.map(state => state.count);
    const double            = isolate(Double, 'double')({DOM: sources.DOM, count$}); // this

    const reducer$          = xs.merge(fnInit$, incrementer.onion);

    const vdom$             = xs.combine(state$, incrementer.DOM, double.DOM)
                                .map(([ state, incrementer, double ]) => div([
                                    incrementer,
                                    double,
                                    div(JSON.stringify(state)),

                                ]));

    return {
        DOM: vdom$,
        onion: reducer$,
    };
}

function Double(sources) {
    const vdom$         = sources.count$
                            .map(count => count * 2)
                            .map(count => div([
                                div('Double : ' + count.toString()),
                            ]));

    return {
        DOM     : vdom$,
    }
}