Todo

todo.jsx

var TodosStore = Reflux.createStore({
  listenables: TodoActions,

  init() {
    this._todos = null;
    this._loaded = false;
  },

  isLoaded() {
    return this._loaded;
  },

  getAll() {
    if (this._loaded) {
      return this._todos;
    }

    xhr.get('/api/todos', (res) => {
      this._todos = res.body;
      this._loaded = true;
      this.trigger();
    });
  },

  onDeleteTodo(todo) {
    this._todos.splice(this._todos.indexOf(todo), 1);
    this.trigger();
  }
});

var App = React.createClass({
  mixins: [Reflux.Listener],

  getInitialState() {
    return this.getStateFromStores();
  },

  getStateFromStores() {
    return {
      todos: TodosStore.getAll() // Fyrer requst hvis ikke cachet
    }
  },

  onStoreChange() {
    this.setState(this.getStateFromStores())
  },

  componentDidMount() {
    this.listenTo(TodosStore, this.onStoreChange)
  },

  render() {
    var todos = this.state.todos;

    if (!todos) {
      return <div>Loading...</div>
    }

    return (
      <ul>
        {todos.map((t, i) => <Todo key={i}>{t}</Todo>)}
      </ul>
    );
  }
});