Simple react-redux implemententation using all "render props" and react-broadcast@next

react-redux.js

import React, { Component } from "react";
import { createContext } from "react-broadcast";

const StoreContext = createContext();

class Connected extends Component {
  state = this.props.store.getState();
  componentDidMount() {
    this.props.store.subscribe(() => {
      this.setState(this.props.store.getState());
    });
  }
  render() {
    return this.props.children({
      ...this.props.mapStateToProps(this.state),
      ...this.props.mapDispatchToProps(this.props.store.dispatch)
    });
  }
}
export function Connect(props) {
  return (
    <StoreContext.Consumer>
      {store => <Connected store={store} {...props} />}
    </StoreContext.Consumer>
  );
}

export function Provider(props) {
  return (
    <StoreContext.Provider value={props.store}>
      {props.children}
    </StoreContext.Provider>
  );
}

sample-usage.js

import React from "react";
import { render } from "react-dom";
import { Connect, Provider } from "./react-redux";

import { store } from "./store";

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

function App() {
  return (
    <Connect
      mapStateToProps={mapStateToProps}
      mapDispatchToProps={mapDispatchToProps}
    >
      {props => (
        <div>
          ...
        </div>
      )}
    </Connect>
  );
}