JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/dynamic-object@2.1.19/built/bundle.js"></script>
<script src="https://unpkg.com/dependency-inject@1.0.15/built/bundle.js"></script>
<script src="https://unpkg.com/dynamic-react@2.0.20/built/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<div id='react-dom'></div>

Babel + JSX

// import { observable, createReduxStore } from 'dynamic-object'
// import * as ReactRedux from "react-redux"

class User {
  store = observable({
    name: "小明",
    age: 5,
    articles: [{
      title: "福尔摩斯探案",
      price: 59
    }, {
      title: "精灵的城堡",
      price: 63
    }]
  })

  setName(name) {
    this.store.name = name
  }

  addArticle(article) {
    this.store.articles.push(article)
  }
}

const { store, combineActions } = createReduxStore({
  user: User
})

@ReactRedux.connect((state, ownProps) => {
  return {
    name: state.user.name,
    articles: state.user.articles
  }
})
class App extends React.PureComponent {
  componentWillMount() {
    setTimeout(() => {
      this.props.dispatch(combineActions.user.setName("小李子"))
    }, 1000)
    setTimeout(() => {
      this.props.dispatch(combineActions.user.setName("小黑子"))
    }, 2000)
    setTimeout(() => {
      this.props.dispatch(combineActions.user.addArticle({
      	title: "三体",
        price: 66
      }))
    }, 3000)
  }

  render() {
    const Articles = this.props.articles.map((article, index) => {
      return (
        <div key={index}>{article.title}, {article.price}</div>
      )
    })

    return (
      <div>
        {this.props.name}
        {Articles}
      </div>
    )
  }
}

ReactDOM.render(
  <ReactRedux.Provider store={store}>
    <App />
  </ReactRedux.Provider>,
  document.getElementById("react-dom")
)