flarnie

// The case statement documents which actions this store listens to
// ...
ThreadStore.dispatchToken = ChatAppDispatcher.register(function(payload) {
  var action = payload.action;

  switch(action.type) {

    case ActionTypes.CLICK_THREAD:
      _currentID = action.threadID;
      _threads[_currentID].lastMessage.isRead = true;

flarnie

// The component listens for changes and calls the '_onChange' callback
// ...
var TodoApp = React.createClass({
 
  getInitialState: function() {
    return getTodoState();
  },
 
  componentDidMount: function() {
    TodoStore.addChangeListener(this._onChange);

flarnie

// TodoStore emits a 'change' event after handling the action.
// ...
// Register to handle all updates
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;
 
  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();

flarnie

// The TodoStore has registered a callback for the 'TODO_CREATE' action.
// ...
/**
 * Create a TODO item.
 * @param  {string} text The content of the TODO
 */
function create(text) {
  // Hand waving here -- not showing how this interacts with XHR or persistent
  // server-side storage.
  // Using the current timestamp + random number in place of a real id.

flarnie

// The 'handleViewAction' dispatches the action to all stores.
// ...
var Dispatcher = require('flux').Dispatcher;
var assign = require('object-assign');
 
var AppDispatcher = assign(new Dispatcher(), {
 
  /**
   * A bridge function between the views and the dispatcher, marking the action
   * as a view action.  Another variant here could be handleServerAction.

flarnie

// The 'create' method creates an action of type 'TODO_CREATE'
// ...
var TodoActions = {
 
  /**
   * @param  {string} text
   */
  create: function(text) {
    AppDispatcher.handleViewAction({
      actionType: TodoConstants.TODO_CREATE,

flarnie

// The '_onSave' callback calls the 'TodoActions' method to create an action
// ...
  /**
   * Event handler called within TodoTextInput.
   * Defining this here allows TodoTextInput to be used in multiple places
   * in different ways.
   * @param {string} text
   */
  _onSave: function(text) {
    if (text.trim()){

flarnie

// Saving a new ToDo calls the '_onSave' callback
// ...
var Header = React.createClass({
 
  /**
   * @return {object}
   */
  render: function() {
    return (
      <header id="header">

flarnie

// Loading the initial data into the application:
// ...
/**
 * Retrieve the current TODO data from the TodoStore
 */
function getTodoState() {
  return {
    allTodos: TodoStore.getAll(),
    areAllComplete: TodoStore.areAllComplete()
  };

flarnie

// The 'handleViewAction' dispatches the action to all stores.
// ...
var Dispatcher = require('flux').Dispatcher;
var assign = require('object-assign');

var AppDispatcher = assign(new Dispatcher(), {

  /**
   * A bridge function between the views and the dispatcher, marking the action
   * as a view action.  Another variant here could be handleServerAction.