In cyclejs, how to render a component with "if else"

Question

function componentA(sources$) {
   return {
      dom$: ...,
      http$: ...
  }
}    

function componentB(sources$) {
   return {
      dom$: ...,
      http$: ...
  }
}

function main(sources$) {    
    sources$.props.pipe(
       switchMap(props=> {
           if (props.showA) {
              const sinksA$ = componentA(sources$);
           } else {
              const sinksB$ = componentB(sources$);
          }
      })
   )

  return {
           // how to make dom$ and htttp$ ?
  }
}

So how can I merge two different streams separately?

Answer 1

This may accomplish what you are trying to achieve:

function main(sources) {
  // Component A
  const aSinks$ = sources.props
    .filter(props => props.showA)
    .mapTo(componentA(sources));
  const aDom$ = aSinks$.map(sinks => sinks.dom)
  const aHttp$ = aSinks$.map(sinks => sinks.http)

  // Component B
  const bSinks$ = sources.props
    .filter(props => !props.showA)
    .mapTo(componentB(sources));
  const bDom$ = bSinks$.map(sinks => sinks.dom)
  const bHttp$ = bSinks$.map(sinks => sinks.http)

  return {
    dom$: xs.merge(aDom$, bDom$),
    http$: xs.merge(aHttp$, bHttp$),
  };
}

Let me know if you need more explanation than this example code.