gistfile1.js

import Alt from 'alt';
import AltContainer from 'alt/AltContainer';
import React, {Component, PropTypes} from 'react';
import {decorate, bind} from 'alt/utils/decorators';

const alt = new Alt();

const SearchResultsActions = alt.createActions(
  class SearchResultsActions {
    fetchResults(searchTerm) {
      // we dispatch an event here so we can have "loading" state.
      this.dispatch();
    }
  }
);

const SearchResultsStore = alt.createStore(
  @decorate(alt)
  class SearchResultsStore{
    constructor() {
      this.state = {
        fetching: false
      };
    }
  
    @bind(SearchResultsActions.fetchResults)
    handleFetchResults() {
      this.setState({
        fetching: true
      });
      // Fetching is true here, but false when render runs inside of the component, why?
    }
  }
);

class SearchResults extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.fetchResults();
  }

  render() {
    let loadingDisplay = this.props.fetching ? 'block' : 'none';

    return (
      <div className="searchResults">
        <div style={{display: loadingDisplay}} >Loading...</div>
      </div>
    );
  }
}

class SearchResultsContainer extends Component {
  render() {
    return (
      <AltContainer
        component={SearchResults}
        store={SearchResultsStore}
        actions={SearchResultsActions}
      />
    );
  }
}