app.jsx

import {app} from '../helpers'
import MessageList from './message-list'
import Messages from '../mixins/messages'

export default () => {
  app({
    mixins: [Messages],
    view: (state, actions) =>
      <div>
        <MessageList compose={{state, actions}} />
      </div>
  })
}

composers.jsx

export default {
  MessageList: (state, actions) => ({
    messages: state.messages,
  })
}

helpers.jsx

export function compose(Component, composer) {
  const ComposedComponent = ({compose}) => {
    composer = composer || composers[Component.name]

    return (
      <Component
        {...(composer ? composer(compose.state, compose.actions) : compose)}
      />
    )
  }

  return ComposedComponent
}

message-list.jsx

import {compose} from '../helpers'
import Message from '../components/message-list-item'

const MessageList = ({messages}) =>
  <div>
     {messages.map(item => <Message key={item.id} {...item} />)}
  </div>

export default compose(MessageList)