LogViewer.jsx

export class LogViewer extends React.Component<any, any> {
  // some parts are omitted for brevity, like store subscription, or the actions
  public defaultPresenter = ({message}) => <div>{message}</div>
  
  public render() { return (
    <ul>
      <li>
        {logStore.items.map( m => {
          const P = m.presenter || this.defaultPresenter
          return <P key={m.id} {...m} />
        })}
      </li>
    </ul>
  )}
}

//log simple string
log("simple text") //wraps log({message:"simple text"})

//log some static markup
const walnutLogger = ({title, size}) => <div><b>{title}</b><i>{size}</i></div>
log({title:"walnut cake", 
     size:20, 
     presenter: walnutLogger
   })
   
//log something that you can update (like a progressbar)
const walnutLogger = ({title, size}) => <div><b>{title}</b><i>{size}</i></div>
const walnutLog = {title:"walnut cake", size:20, presenter: walnutLogger }
log(walnutLog)

while(theres_more_todo) {
  const { theres_more_todo } = await asyncProcessOfYours()
  logStore.dispatchTo(walnutLog, { progress: newProgressValue })
}