Connecting your React Component

This part is more about React than Alt. The important part is how you listen to Stores and get data out of it.

Every alt Store has a getState() method to return its state. Our component will fetch the Store state on creation and register for any changes that may be triggered afterwards.

import React from 'react';
import LocationStore from '../stores/LocationStore';

class LocationsComponent extends React.Component {

  constructor() {
    this.state = LocationStore.getState();
    this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    // register for changes in state
    this.sub = LocationStore.subscribe(this.onChange);
  }

  componentWillUnmount() {
    // unregister listener
    this.sub.dispose();
  }

  onChange(state) {
    this.setState(state);
  }

  render() {
    return (
      <ul>
        {
          this.state.locations.map(function(location, index) => {
            return <li key={index}>{location.name}</li>
          })
        }
      </ul>
    );
  }

}

export default LocationsComponent;

This is a bit messy, and we can do better. In the next step we will see how to render data using this.props instead of this.state using AltContainer.

Next: AltContainer