react-kilto/src/connect.js

Bindings between Kilto and React

import React, { Component, PropTypes } from 'react';


const connect = (mapStateToProps, mapDispatchToProps) => (TargetComponent) => {
  class Connected extends Component {
    constructor(props, context) {
      super(props, context);
      this.store = this.context.store;
      this.dispatchProps = mapDispatchToProps(this.store.dispatch);
      
      this.unsubFromKilto = this.store.subscribe(() => {
        this.forceUpdate();
      });
    }
    componentWillUnmount() {
      this.unsubFromKilto();
    }

    render() {
      const currentState = this.store.getState();

      const targetProps = { ...mapStateToProps(currentState), ...this.dispatchProps };

      return (
        React.createElement(TargetComponent, targetProps)
      );
    }
  }
  Connected.displayName = 'Connected';
  Connected.contextTypes = {
    store: PropTypes.shape({
      getState: PropTypes.func.isRequired, 
      subscribe: PropTypes.func.isRequired, 
      reset: PropTypes.func.isRequired, 
      dispatch: PropTypes.func.isRequired
    }).isRequired
  };
  
  return Connected;
};

export default connect;