DI для полностью переиспользуемых JSX-компонентов

import { connect } from 'react-redux'
import React, { PropTypes } from 'react'

const HELLO_WORLD = 'HELLO_WORLD'

const helloWorld = (state = { message: 'Hello' }, action) => {
  switch (action.type) {
    case HELLO_WORLD:
      return Object.assign({}, state, { message: 'Hello, World!' })
    default:
      return state
  }
}

const Hello = ({ onClick, message }) => {
  return (
    <div>
      <h1>{ message }</h1>
      <button onClick={onClick}>Click</button>
    </div>
  )
}

const mapStateToProps = (state, ownProps) => {
  return {
    message: state.helloWorld.message
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch({ type: HELLO_WORLD })
    }
  }
}

const HelloWorld = connect(
  mapStateToProps,
  mapDispatchToProps
)(Hello)

import {mem} from 'lom_atom'
class HelloWorldStore {
  @mem message = 'Hello'
   onClick() {
      this.message = 'Hello, World!'
   }
}

function HelloWord(_: {}, store: HelloWorldStore) {
  return (
    <div>
      <h1>{ store.message }</h1>
      <button onClick={() => store.onClick()}>Click</button>
    </div>
  )
}

function fetchName() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // reject(new Error('Fetch error'))
      resolve({name: 'John'})
    }, 500)
  })
}

interface HelloModel {
  name: string;
}

class HelloService {
    @mem set hello(next: HelloModel | Error) {}
    @mem get hello(): HelloModel {
      fetchName()
        .then((model) => { this.hello = model })
        .catch((error) => { this.hello = error })

      throw new mem.Wait()
    }
}

function HelloView(props: {greet: string}, service: HelloService) {
    return <div>
        {props.greet}, {service.hello.name}
        <br/><input value={service.hello.name} onChange={(e) => { service.hello = {...service.hello, name: e.target.value} }} />
    </div>
}

ReactDOM.render(<HelloView greet="Hello"/>, document.getElementById('mount'))

import {Component} from '@angular/core';

function fetchName() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // reject(new Error('Fetch error'))
      resolve({name: 'John'})
    }, 500)
  })
}

interface HelloModel {
  name: string;
}

export class Hello implements HelloModel {
  name = 'Vasian'
}


@Component({
  selector: 'my-app',
  template: `
    <div>
    <div *ngIf="error; else elseBlock">
      {{error.message}}
    </div>
    <ng-template #elseBlock>
  {{greet}}, {{hello.name}}
  <br/><input [(ngModel)]="hello.name">
    </ng-template>
    </div>
`
})
export class AppComponent  {
  greet = 'Hello';
  error: any = '';
  hello: Hello = new Hello()

  ngOnInit() {
    fetchName()
      .then(hello => this.hello = hello)
      .catch(error => this.error = error)
  }
}