I created the exact same app in React and Vue(medium.com)

  When working in the [react] ecosystem I feel like I'm 
  constantly trying to couple together chains that call 
  functions on functions on objects.

  // global-store.js
  const remove = (arr, el) => {
    const i = arr.indexOf(el);
    if (i < 0) return false;
    return !!arr.splice(i, 1);
  }

  class GlobalStore {
    constructor(data){
      this.data = data;
      this.subs = [];
    }
    sub(cb){this.subs.push(cb)}
    unsub(cb){remove(this.subs, cb)}
    notify(newArr){
      for (let s of this.subs) 
        s(newArr);
    }
    addData(item){
      notify(this.data = [...data, item])
    }
    removeData(item){
      if (remove(this.data, item))
        notify(this.data = [...this.data])
    }
  }

  // my-component.js
  import myStore from "./stores"
  class MyComp extends Component {
    ...
    componentDidMount(){
      myStore.sub(this._cb = data => {
        this.setState({data})
      })
    }
    componentWillUnmount(){
      myStore.unsub(this._cb)
    }
  }

  class Square extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: null,
      };
    }
    render() {
      return (
        <button
          className="square"
          => this.setState({value: 'X'})}
        >
          {this.state.value}
        </button>
      );
    }
  }

  function Square() {
    const state = { value: null };
    return {
      view() {
        return (
          m('button.square', {
            onclick() { state.value = 'X'; }
          }, state.value);
        );
      }
    }
  }