Container Component Connected to Both Reflux and Redux (WIP)

container-reflux-and-redux.jsx

// This is what a container component connected to both Reflux and Redux will
// look like as we transition to Redux

import React from 'react';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as userActions '../actions/user';

// Reflux stuff to refactor
import Reflux from 'reflux';
import compareModeStore from '../stores/compare-mode';
import searchStore from '../stores/search';


const mapStateToProps = state => ({
  user: state.user
});

const mapDispatchToProps = dispatch => ({
  userActions: bindActionCreators(userActions, dispatch)
});

const propTypes = {
  user: PropTypes.object, // this is the user state injected from Redux
  userActions: PropTypes.object // these are the actions injected from Redux
};

const defaultProps = {};
const contextTypes = {};

const MyComponent = React.createClass({
  mixins: [
    Reflux.connect(compareModeStore, 'compareMode'),
    Reflux.listenTo(searchStore, '_onSearchChange')
  ],

  getInitialState: function() {
    compareMode: null // this is bound to the state from the compare mode reflux store
  },

  // this is called on changes to the search store
  _onSearchChange: function() {
    // ...
  }

  render: function() {
    const { user, userActions } = this.props;
    return (
      <div>
        <p>{user.userName}</p>
        <Login onLogin={userActions.logIn} />
      </div>
    );
  }
});

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;
MyComponent.contextTypes = contextTypes;

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);