React-Flux 介绍及实例演示

一、Flux架构

二、例子

1.TodoApp.react.js

 /**
  * Copyright (c) 2014-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */

 /**
  * This component operates as a "Controller-View".  It listens for changes in
  * the TodoStore and passes the new data to its children.
  */

 var Footer = require('./Footer.react');
 var Header = require('./Header.react');
 var MainSection = require('./MainSection.react');
 var React = require('react');
 var TodoStore = require('../stores/TodoStore');

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

 var TodoApp = React.createClass({

   getInitialState: function() {
     return getTodoState();
   },

   componentDidMount: function() {
     TodoStore.addChangeListener(this._onChange);
   },

   componentWillUnmount: function() {
     TodoStore.removeChangeListener(this._onChange);
   },

   /**
    * @return {object}
    */
   render: function() {
     return (
       <div>
         <Header />
         <MainSection
           allTodos={this.state.allTodos}
           areAllComplete={this.state.areAllComplete}
         />
         <Footer allTodos={this.state.allTodos} />
       </div>
     );
   },

   /**
    * Event handler for 'change' events coming from the TodoStore
    */
   _onChange: function() {
     this.setState(getTodoState());
   }

 });

 module.exports = TodoApp;

2.TodoActions.js

 /*
  * Copyright (c) 2014-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * TodoActions
  */

 var AppDispatcher = require('../dispatcher/AppDispatcher');
 var TodoConstants = require('../constants/TodoConstants');

 var TodoActions = {

   /**
    * @param  {string} text
    */
   create: function(text) {
     AppDispatcher.dispatch({
       actionType: TodoConstants.TODO_CREATE,
       text: text
     });
   },

   /**
    * @param  {string} id The ID of the ToDo item
    * @param  {string} text
    */
   updateText: function(id, text) {
     AppDispatcher.dispatch({
       actionType: TodoConstants.TODO_UPDATE_TEXT,
       id: id,
       text: text
     });
   },

   /**
    * Toggle whether a single ToDo is complete
    * @param  {object} todo
    */
   toggleComplete: function(todo) {
     var id = todo.id;
     var actionType = todo.complete ?
         TodoConstants.TODO_UNDO_COMPLETE :
         TodoConstants.TODO_COMPLETE;

     AppDispatcher.dispatch({
       actionType: actionType,
       id: id
     });
   },

   /**
    * Mark all ToDos as complete
    */
   toggleCompleteAll: function() {
     AppDispatcher.dispatch({
       actionType: TodoConstants.TODO_TOGGLE_COMPLETE_ALL
     });
   },

   /**
    * @param  {string} id
    */
   destroy: function(id) {
     AppDispatcher.dispatch({
       actionType: TodoConstants.TODO_DESTROY,
       id: id
     });
   },

   /**
    * Delete all the completed ToDos
    */
   destroyCompleted: function() {
     AppDispatcher.dispatch({
       actionType: TodoConstants.TODO_DESTROY_COMPLETED
     });
   }

 };

 module.exports = TodoActions;

3.AppDispatcher.js

 /*
  * Copyright (c) 2014-2015, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * AppDispatcher
  *
  * A singleton that operates as the central hub for application updates.
  */

 var Dispatcher = require('flux').Dispatcher;

 module.exports = new Dispatcher();

4.TodoStore.js

 /*
  * Copyright (c) 2014, Facebook, Inc.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * TodoStore
  */

 var AppDispatcher = require('../dispatcher/AppDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var TodoConstants = require('../constants/TodoConstants');
 var assign = require('object-assign');

 var CHANGE_EVENT = 'change';

 var _todos = {};

 /**
  * 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.
   var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
   _todos[id] = {
     id: id,
     complete: false,
     text: text
   };
 }

 /**
  * Update a TODO item.
  * @param  {string} id
  * @param {object} updates An object literal containing only the data to be
  *     updated.
  */
 function update(id, updates) {
   _todos[id] = assign({}, _todos[id], updates);
 }

 /**
  * Update all of the TODO items with the same object.
  * @param  {object} updates An object literal containing only the data to be
  *     updated.
  */
 function updateAll(updates) {
   for (var id in _todos) {
     update(id, updates);
   }
 }

 /**
  * Delete a TODO item.
  * @param  {string} id
  */
 function destroy(id) {
   delete _todos[id];
 }

 /**
  * Delete all the completed TODO items.
  */
 function destroyCompleted() {
   for (var id in _todos) {
     if (_todos[id].complete) {
       destroy(id);
     }
   }
 }

 var TodoStore = assign({}, EventEmitter.prototype, {

   /**
    * Tests whether all the remaining TODO items are marked as completed.
    * @return {boolean}
    */
   areAllComplete: function() {
     for (var id in _todos) {
       if (!_todos[id].complete) {
         return false;
       }
     }
     return true;
   },

   /**
    * Get the entire collection of TODOs.
    * @return {object}
    */
   getAll: function() {
     return _todos;
   },

   emitChange: function() {
     this.emit(CHANGE_EVENT);
   },

   /**
    * @param {function} callback
    */
   addChangeListener: function(callback) {
     this.on(CHANGE_EVENT, callback);
   },

   /**
    * @param {function} callback
    */
   removeChangeListener: function(callback) {
     this.removeListener(CHANGE_EVENT, callback);
   }
 });

 // Register callback to handle all updates
 AppDispatcher.register(function(action) {
   var text;

   switch(action.actionType) {
     case TodoConstants.TODO_CREATE:
       text = action.text.trim();
       if (text !== '') {
         create(text);
         TodoStore.emitChange();
       }
       break;

     case TodoConstants.TODO_TOGGLE_COMPLETE_ALL:
       if (TodoStore.areAllComplete()) {
         updateAll({complete: false});
       } else {
         updateAll({complete: true});
       }
       TodoStore.emitChange();
       break;

     case TodoConstants.TODO_UNDO_COMPLETE:
       update(action.id, {complete: false});
       TodoStore.emitChange();
       break;

     case TodoConstants.TODO_COMPLETE:
       update(action.id, {complete: true});
       TodoStore.emitChange();
       break;

     case TodoConstants.TODO_UPDATE_TEXT:
       text = action.text.trim();
       if (text !== '') {
         update(action.id, {text: text});
         TodoStore.emitChange();
       }
       break;

     case TodoConstants.TODO_DESTROY:
       destroy(action.id);
       TodoStore.emitChange();
       break;

     case TodoConstants.TODO_DESTROY_COMPLETED:
       destroyCompleted();
       TodoStore.emitChange();
       break;

     default:
       // no op
   }
 });

 module.exports = TodoStore;