How to use @cycle/state - 10 common examples

const wrapper = function WithLocalState(sources) {
    const merger = createDefaultStateMerger()

    // Combine the 2 channels into 1 stream with the merger
    const state$ = xs
      .combine(
        sources[stateChannel].stream.startWith(undefined),
        sources[localChannel].stream.startWith(undefined)
      )
      .map(([g, l]) => merger.merge(g, l))
      .remember()

    const sinks = cmp({
      ...omit([localChannel])(sources),
      [stateChannel]: new StateSource(
        state$.drop(2),
        'withLocalState'
      )
    })

    // Convert the emitted reducers back to state values and run
    // it through extract
    const updated$ = !sinks[stateChannel] ? xs.never() :
      sinks[stateChannel]
        .compose(sampleCombine(state$))
        .map(([reducer, state]) => merger.extract(reducer(state)))

    // Convert the extracted state values back to reducers for the separate
    // channels
    const global$ = updated$.map(extractedState => prevState => {
      return { ...prevState, ...extractedState.global }

export function Collection (sources) {
  const indexKey = sources.props.indexKey || 'index'
  const idKey = sources.props.idKey || 'id'

  const innerFragmentKey = sources.key || uniqueId()

  const List = makeCollection({
    item: CollectionItem(idKey),

    // I'm not sure what it's for. From cycle's source, it seems like that it
    // serves as an isolation base, but we already have isolation on the items...
    // itemKey: (childState, index) => String(index),

    itemScope: key => key,
    collectSinks: instances => {
      return ({
        react: instances
          .pickCombine('react')
          .map(itemVdoms => pragma(
            Fragment,
            { key: innerFragmentKey },
            itemVdoms.map((vdom, idx) => ({
              ...vdom,

export function Collection (sources) {
  const outerStateName = sources.props.outerstate === undefined
    ? 'outerState'
    : sources.props.outerstate

  const channel = sources.props.channel || 'state'

  const forLens = !sources.props.for
    ? identityLens
    : getPathLens(sources.props.for)

  const collectionCmp = makeCollection({
    item: CollectionItem,

    // It might be relevant, when a collection item sink calculates something
    // based on the initial value.
    // itemKey: (childState, index) => String(index),

    channel,
    itemScope: sources.props.itemscope || (key => key),
    collectSinks: collectSinksBasedOnSource({
      ...sources,
      // Value doesn't matter here, just add the outerstate key for pickMerge
      ...outerStateName && { [outerStateName]: 1 }
    })
  })

  // This part wraps the item states in an object which provides access to all

export function withTransactionalState (reducer, cmp) {
  return withState(sources => {
    const sinks = withPower(cmp)(sources)

    sinks.state =
      (sinks.state || xs.never())
        .compose(
          sampleCombine(sources.state.stream.startWith(undefined))
        )
        .map(([actionOrReducer, prevState]) => {
          if (typeof actionOrReducer === 'function') {
            console.warn('withTransactionalState: function reducer received ' +
              'instead of action.', actionOrReducer)

            return actionOrReducer
          } else {
            return () => reducer(prevState, actionOrReducer)
          }

import {biography} from './screens/biography/index';
import {accounts} from './screens/accounts/index';
import {rawDatabase} from './screens/raw-db/index';
import {rawMessage} from './screens/raw-msg/index';
import {backup} from './screens/backup/index';
import {secretOutput} from './screens/secret-output/index';
import {secretInput} from './screens/secret-input/index';
import {Palette} from './global-styles/palette';
import {Typography} from './global-styles/typography';

export const screens: {[k in Screens]?: (so: any) => any} = {
  [Screens.Welcome]: withState(welcome),
  [Screens.Central]: withState(central),
  [Screens.Drawer]: withState(drawer),
  [Screens.Compose]: withState(compose),
  [Screens.Thread]: withState(thread),
  [Screens.InvitePaste]: withState(pasteInvite),
  [Screens.InviteCreate]: withState(createInvite),
  [Screens.Profile]: withState(profile),
  [Screens.ProfileEdit]: withState(editProfile),
  [Screens.Biography]: withState(biography),
  [Screens.Accounts]: withState(accounts),
  [Screens.Backup]: withState(backup),
  [Screens.SecretOutput]: withState(secretOutput),
  [Screens.SecretInput]: withState(secretInput),
  [Screens.RawDatabase]: rawDatabase,
  [Screens.RawMessage]: rawMessage,
};

export const drivers = {
  alert: alertDriver,
  asyncstorage: asyncStorageDriver,

import {createInvite} from './screens/invite-create';
import {biography} from './screens/biography/index';
import {accounts} from './screens/accounts/index';
import {rawDatabase} from './screens/raw-db/index';
import {rawMessage} from './screens/raw-msg/index';
import {backup} from './screens/backup/index';
import {secretOutput} from './screens/secret-output/index';
import {secretInput} from './screens/secret-input/index';
import {Palette} from './global-styles/palette';
import {Typography} from './global-styles/typography';

export const screens: {[k in Screens]?: (so: any) => any} = {
  [Screens.Welcome]: withState(welcome),
  [Screens.Central]: withState(central),
  [Screens.Drawer]: withState(drawer),
  [Screens.Compose]: withState(compose),
  [Screens.Thread]: withState(thread),
  [Screens.InvitePaste]: withState(pasteInvite),
  [Screens.InviteCreate]: withState(createInvite),
  [Screens.Profile]: withState(profile),
  [Screens.ProfileEdit]: withState(editProfile),
  [Screens.Biography]: withState(biography),
  [Screens.Accounts]: withState(accounts),
  [Screens.Backup]: withState(backup),
  [Screens.SecretOutput]: withState(secretOutput),
  [Screens.SecretInput]: withState(secretInput),
  [Screens.RawDatabase]: rawDatabase,
  [Screens.RawMessage]: rawMessage,
};

export const drivers = {
  alert: alertDriver,

import {pasteInvite} from './screens/invite-paste/index';
import {profile} from './screens/profile/index';
import {editProfile} from './screens/profile-edit/index';
import {createInvite} from './screens/invite-create';
import {biography} from './screens/biography/index';
import {accounts} from './screens/accounts/index';
import {rawDatabase} from './screens/raw-db/index';
import {rawMessage} from './screens/raw-msg/index';
import {backup} from './screens/backup/index';
import {secretOutput} from './screens/secret-output/index';
import {secretInput} from './screens/secret-input/index';
import {Palette} from './global-styles/palette';
import {Typography} from './global-styles/typography';

export const screens: {[k in Screens]?: (so: any) => any} = {
  [Screens.Welcome]: withState(welcome),
  [Screens.Central]: withState(central),
  [Screens.Drawer]: withState(drawer),
  [Screens.Compose]: withState(compose),
  [Screens.Thread]: withState(thread),
  [Screens.InvitePaste]: withState(pasteInvite),
  [Screens.InviteCreate]: withState(createInvite),
  [Screens.Profile]: withState(profile),
  [Screens.ProfileEdit]: withState(editProfile),
  [Screens.Biography]: withState(biography),
  [Screens.Accounts]: withState(accounts),
  [Screens.Backup]: withState(backup),
  [Screens.SecretOutput]: withState(secretOutput),
  [Screens.SecretInput]: withState(secretInput),
  [Screens.RawDatabase]: rawDatabase,
  [Screens.RawMessage]: rawMessage,
};

import {rawDatabase} from './screens/raw-db/index';
import {rawMessage} from './screens/raw-msg/index';
import {backup} from './screens/backup/index';
import {secretOutput} from './screens/secret-output/index';
import {secretInput} from './screens/secret-input/index';
import {Palette} from './global-styles/palette';
import {Typography} from './global-styles/typography';

export const screens: {[k in Screens]?: (so: any) => any} = {
  [Screens.Welcome]: withState(welcome),
  [Screens.Central]: withState(central),
  [Screens.Drawer]: withState(drawer),
  [Screens.Compose]: withState(compose),
  [Screens.Thread]: withState(thread),
  [Screens.InvitePaste]: withState(pasteInvite),
  [Screens.InviteCreate]: withState(createInvite),
  [Screens.Profile]: withState(profile),
  [Screens.ProfileEdit]: withState(editProfile),
  [Screens.Biography]: withState(biography),
  [Screens.Accounts]: withState(accounts),
  [Screens.Backup]: withState(backup),
  [Screens.SecretOutput]: withState(secretOutput),
  [Screens.SecretInput]: withState(secretInput),
  [Screens.RawDatabase]: rawDatabase,
  [Screens.RawMessage]: rawMessage,
};

export const drivers = {
  alert: alertDriver,
  asyncstorage: asyncStorageDriver,
  keyboard: makeKeyboardDriver(),
  clipboard: makeClipboardDriver(),

import {Palette} from './global-styles/palette';
import {Typography} from './global-styles/typography';

export const screens: {[k in Screens]?: (so: any) => any} = {
  [Screens.Welcome]: withState(welcome),
  [Screens.Central]: withState(central),
  [Screens.Drawer]: withState(drawer),
  [Screens.Compose]: withState(compose),
  [Screens.Thread]: withState(thread),
  [Screens.InvitePaste]: withState(pasteInvite),
  [Screens.InviteCreate]: withState(createInvite),
  [Screens.Profile]: withState(profile),
  [Screens.ProfileEdit]: withState(editProfile),
  [Screens.Biography]: withState(biography),
  [Screens.Accounts]: withState(accounts),
  [Screens.Backup]: withState(backup),
  [Screens.SecretOutput]: withState(secretOutput),
  [Screens.SecretInput]: withState(secretInput),
  [Screens.RawDatabase]: rawDatabase,
  [Screens.RawMessage]: rawMessage,
};

export const drivers = {
  alert: alertDriver,
  asyncstorage: asyncStorageDriver,
  keyboard: makeKeyboardDriver(),
  clipboard: makeClipboardDriver(),
  linking: linkingDriver,
  globalEventBus: makeEventBusDriver(),
  ssb: ssbDriver,
  share: shareDriver,
  lifecycle: makeActivityLifecycleDriver(),

const global$ = updated$.map(extractedState => prevState => {
      return { ...prevState, ...extractedState.global }
    })

    const local$ = updated$.map(extractedState => prevState => {
      return { ...prevState, ...extractedState.local }
    })

    return {
      ...sinks,
      [stateChannel]: global$,
      [localChannel]: local$
    }
  }

  return withState(wrapper, localChannel)
}