import ReactDOM from 'react-dom';
import React, { Fragment } from 'react';
import { create, mount, connect } from 'rc-flex-store';
 
const counter = create(
  {
    count: 0
  },
  {
    increment() {
      this.setState({ count: this.state.count + 1 });
    },
    decrement() {
      this.setState({ count: this.state.count - 1 });
    }
  },
  'counter'
);
 
@connect(
  counter,
  (store, { count }) => ({ count })
)
class CounterView extends React.PureComponent {
  render() {
    const { count } = this.props;
 
    return <div> {count} </div>;
  }
}
 
@connect(
  counter,
  ({ decrement, increment }) => ({ decrement, increment })
)
class CounterAction extends React.PureComponent {
  render() {
    const { decrement, increment } = this.props;
 
    return (
      <div>
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
      </div>
    );
  }
}
 
@mount(counter)
class Counter extends React.Component {
  render() {
    return (
      <Fragment>
        <CounterView />
        <CounterAction />
      </Fragment>
    );
  }
}
 
ReactDOM.render(<Counter />, document.getElementById('app'));