How to use the xstream.merge function in xstream

function Collection (component, sources = {}, sourceAdd$ = xs.empty(), removeSelector = noop) {
    const removeProxy$ = xs.create();
    const add$ = xs.fromObservable(sourceAdd$);
    const addReducer$ = add$.map(sourcesList => collection => {
      if (Array.isArray(sourcesList)) {
        // multiple items
        return sourcesList.reduce((collection, sources) => collection.add(sources), collection);
      } else {
        // single item
        return collection.add(sourcesList);
      }
    });
    const removeReducer$ = removeProxy$.map(item => collection => collection.remove(item));
    const reducer$ = xs.merge(removeReducer$, addReducer$);

    const emptyCollection = collection({ component, sources, removeSelector });
    const collection$ = reducer$
      .fold((collection, reducer) => reducer(collection), emptyCollection)
      .map(collection => collection.asArray());

    const remove$ = Collection.merge(collection$, item => item._remove$, true);
    removeProxy$.imitate(remove$);

    return adapt(collection$);
  }

)
    .flatten()
    .map(
      newMsg =>
        function addSelfRepliesReducer(prev: State): State {
          return {
            ...prev,
            thread: {
              messages: prev.thread.messages.concat([newMsg]),
              full: true,
            },
          };
        },
    );

  return xs.merge(
    propsReducer$,
    setThreadReducer$,
    keyboardAppearedReducer$,
    keyboardDisappearedReducer$,
    updateReplyTextReducer$,
    publishReplyReducers$,
    aboutReducer$,
    emptyReplyTextReducer$,
    loadReplyDraftReducer$,
    addSelfRepliesReducer$,
  );
}

const allowContinueFromStartMultiply$ = stateChange$
    .filter(state => state.step === 1 && !state.canInteract)
    .compose(delay(styles.step1Duration1 + styles.step1Duration2))
    .mapTo(null);

  const allowContinueFromNextComb$ = stateChange$
    .filter(state => isInCombStep(state) && !state.canInteract)
    .compose(delay(styles.nextCombDuration))
    .mapTo(null);

  const allowContinueFromEnd$ = stateChange$
    .filter(state => state.step === lastCombStep(state) + 1 && !state.canInteract)
    .compose(delay(styles.finalResultDuration))
    .mapTo(null);

  return xs.merge(
    allowContinueFromStartMultiply$,
    allowContinueFromNextComb$,
    allowContinueFromEnd$,
  );
}

username,
            password,
        })
    );
    const sentR$ = actions.sent$.map(sent => state => ({
        ...state,
        resolving: sent,
    }));
    const tokenR$ = actions.token$.map(res => state => ({
        ...state,
        resolving: false,
        error: res instanceof Error ? res : false,
        done: !(res instanceof Error),
    }));

    const state$ = xs
        .merge(fieldsR$, sentR$, tokenR$)
        .fold((state, action) => action(state), DEFAULT_STATE);

    return {
        state$,
        token$,
        HTTP: requestToken$,
    };
}

  mergeFn: streams => xs.merge(...streams)
}

function intent(
  navSource: NavSource,
  reactSource: ReactSource,
  back$: Stream,
) {
  return {
    goBack$: xs.merge(navSource.backPress(), back$),

    goToProfile$: reactSource.select('accounts').events('pressAccount'),
  };
}

const request$ = url$.map(url => ({ url, category }))

  const response$ =
    sources.HTTP
      .select(category)
      .map(resp$ => resp$.replaceError(err => xs.of(err)))
      .flatten()

  const content$ =
    response$
      .filter(resp => !(resp instanceof Error))
      .map(resp => JSON.parse(resp.text))
      .remember()

  const isLoading$ = xs.merge(
    request$.mapTo(true),
    response$.mapTo(false)
  ).startWith(false)

  const errorMessage$ =
    response$
      .filter(resp => resp instanceof Error)
      .startWith('')

  return { request$, content$, isLoading$, errorMessage$ }
}

function itemRequests$ (deleteComplete$, item) {
  const delete$ = xs.merge(
    item.delete$,
    deleteItemIfComplete$(deleteComplete$, item.complete$)
  ).mapTo({
    method: 'DELETE',
    type: 'application/json'
  });

  const edit$ = item.edit$.map(text => ({
    method: 'PATCH',
    type: 'application/json',
    send: {text}
  }));

  const request$ = xs.merge(delete$, edit$);

  return item.HTTP.map(base => request$.map(request => ({
    ...base,
    ...request
  })))
    .flatten();
}

export function biography(sources: Sources): Sinks {
  const topBarSinks: TBSinks = topBar(sources);

  const vdom$ = view(sources.state.stream, topBarSinks.screen);

  const command$ = xs
    .merge(sources.navigation.backPress(), topBarSinks.back)
    .mapTo({type: 'pop'} as Command);

  const reducer$ = sources.props.map(
    props =>
      function propsReducer(): State {
        return props;
      },
  );

  return {
    screen: vdom$,
    navigation: command$,
    state: reducer$,
  };
}