LittleReduxSimulator

simulator.js

class LittleReduxSimulator extends Component {

  constructor(props) {
    super(props);
    this.state = this.props.init();
  }

  dispatch = value => {
    this.setState(this.props.update(value));
  }

  render() {
    return this.props.render({ dispatch: this.dispatch, state: this.state });
  }

}

const feedbackButtonComponentGenerator = ({ dispatch, state }) => {
  const handleClicked = e => {
    switch (state.fetchStatus) {
      case 'loaded':
        dispatch('loading');
        break;
      case 'loading':
        dispatch('loaded');
        break;
    }
  }
  const { fetchStatus } = state;
  return <button onClick={handleClicked} className="group-feedback layout-row layout-cross-center layout-main-center">
    <span><BrandLarkSmallLogo /></span>
    { fetchStatus === 'loaded' ? "入群反馈" : "加入中" }
  </button>;
}

const docsVIPGroup = (
  <div className="docsVIPGroup-container layout-column layout-cross-center">
    <img className="lark-logo" src={BrandLarkLogo} width={48} height={48} />
    <h1 className="header">Docs VIP 用户群</h1>
    <LittleReduxSimulator
      init={() => ({ fetchStatus: 'loaded' })}
      update={(current, value) => ({ fetchStatus: value })}
      render={feedbackButtonComponentGenerator}
    />
  </div>
);