Experiment with managing state with callbags / pipelines

App.jsx

const initialState = { count: 0 };
const pipeline = map(([state, data]) => ({ count: state.count + data }));

class App extends Component {
  render() {
    return (
      <CallbagState initialState={initialState} pipeline={pipeline}>
        {(state, send) => (
          <div>
            <button onClick={send(1)}>Add 1</button>
            <button onClick={send(2)}>Add 2</button>
            <div>{state.count}</div>
          </div>
        )}
      </CallbagState>
    );
  }
}

CallbagState.jsx

class CallbagState extends Component {
  constructor(props) {
    super(props);

    this.subject = makeSubject();

    this.state = this.props.initialState;

    pipe(
      this.subject,
      this.props.pipeline,
      subscribe({
        next: state => this.setState(state)
      })
    );
  }

  handleSend = data => event => {
    this.subject(1, [this.state, data, event]);
  };

  componentWillMount() {
    this.subject(2); // terminates
  }

  render() {
    if (this.props.render) {
      return this.props.render(this.state, this.handleSend);
    } else {
      return this.props.children(this.state, this.handleSend);
    }
  }
}