Redux Refactor

awesome.jsx

import React from 'react'
import Header from '../components/people/PeopleHeader'
import Footer from '../components/people/PeopleFooter'
import Filtering from '../components/people/FilteringConnector'
import Toolbar from '../components/people/PeopleToolbarConnector'
import Table from '../components/people/PeopleTableConnector'
import EmptyBar from '../components/people/PeopleEmptyBarConnector'

export default class People {

  render() {
    return (
      <section>
        <Header />
        <Filtering />
        <Toolbar />
        <Table />
        <EmptyBar />
        <Footer />
      </section>
    )
  }
}

old.jsx

var React = require('react'),
    Router = require('react-router'),
    Link = Router.Link,
    AltContainer = require('alt/AltContainer'),
    PeopleFilters = require('../components/people/people-filters'),
    PeopleToolbar = require('../components/people/people-toolbar'),
    PeopleTable = require('../components/people/people-table'),
    PeopleHeader = require('../components/people/people-header'),
    PeopleBottomBar = require('../components/people/people-bottom-bar'),
    PeopleEmptyBar = require('../components/people/people-empty-bar');

var People = React.createClass({

  mixins: [Router.State],

  componentDidMount: function() {
    this._loadPeople();
  },

  componentWillReceiveProps: function() {
    this._loadPeople();
  },

  render: function() {
    return (
      <section>
        <PeopleHeader flux={this.props.flux} />

        <AltContainer flux={this.props.flux}
                      stores={{
                        TopicsStore: this.props.flux.getStore('TopicsStore'),
                        SkillsStore: this.props.flux.getStore('SkillsStore'),
                        LanguagesStore: this.props.flux.getStore('LanguagesStore')
                      }}
                      actions={{
                        TopicsActions: this.props.flux.getActions('TopicsActions'),
                        SkillsActions: this.props.flux.getActions('SkillsActions'),
                        LanguagesActions: this.props.flux.getActions('LanguagesActions')
                      }}>
          <PeopleFilters />
        </AltContainer>

        <AltContainer flux={this.props.flux}
                      stores={{
                        PeopleStore: this.props.flux.getStore('PeopleStore')
                      }}>
          <PeopleToolbar />
        </AltContainer>

        <AltContainer stores={{
                        PeopleStore: this.props.flux.getStore('PeopleStore'),
                        UniverseStore: this.props.flux.getStore('UniverseStore')
                      }}
                      actions={{
                        PeopleActions: this.props.flux.getActions('PeopleActions')
                      }}>
          <PeopleTable />
        </AltContainer>

        <AltContainer stores={{
                        SearchStore: this.props.flux.getStore('SearchStore'),
                        SortStore: this.props.flux.getStore('SortStore'),
                        PeopleStore: this.props.flux.getStore('PeopleStore')
                      }}>
          <PeopleEmptyBar />
        </AltContainer>

        <AltContainer flux={this.props.flux}>
          <PeopleBottomBar />
        </AltContainer>
      </section>
    );
  },

  _loadPeople: function() {
    if (!this.props.flux.getStore('PeopleStore').getState().error) {
      this.props.flux.getActions('PeopleActions').beginLoadingPeople(this.getQuery());
    }
  }
});

module.exports = People;