`connectToStores` decorator for https://github.com/goatslacker/alt

connectToStores.md

connecToStores.jsx

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

export default function connectToStores(reducer) {
  return function(DecoratedComponent) {
    return class ConnectToStoresWrapper extends Component {
      static contextTypes = { flux: PropTypes.object.isRequired }

      constructor(props, context) {
        super(props, context);
        const { flux } = this.context;
        const finalState = JSON.parse(flux.takeSnapshot());
        this.state = { customProps: reducer(finalState) };
      }

      componentDidMount() {
        const { flux } = this.context;
        flux.FinalStore.listen(this.handleStoresChange);
      }

      componentWillUnmount() {
        const { flux } = this.context;
        flux.FinalStore.unlisten(this.handleStoresChange);
      }

      handleStoresChange = () => {
        const { flux } = this.context;
        const finalState = JSON.parse(flux.takeSnapshot());
        return this.setState({ customProps: reducer(finalState) });
      }

      render() {
        const { customProps } = this.state;
        return (<DecoratedComponent { ...this.props } { ...customProps } />);
      }
    };
  };
}

Usage

It's based on react-redux connect decorator

import React, { Component, PropTypes } from 'react';
import connectToStores from './connectToStores';

@connectToStores(({ session: { currentUser } }) => ({ currentUser })
class Example extends Component {

  static propTypes = { currentUser: PropTypes.object.isRequired }
  
  render() {
    const { currentUser } = this.props;
    
    return (
      <pre>{ JSON.stringify(currentUser, null, 4)</pre>
    );
  }

}