React ES6 Flux Playground
JavaScript CSS HTML Go PHP Ruby Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
Hello
flux-getting-started-master
mini-flux-master
react-0.14.3
react-study-todo-flux-ajax
react-tutorial-master
react_es6
survey_builder_150312
wa-react-intro
.gitignore
README.md
mini-flux-master.zip

README.md

playground

react/react_es6/

3counter

react/react_es6/react_es6_2/

react flux

leran flux flux-dispatcher-sample-master

var Dispatcher = require("flux").Dispatcher;
var EventEmitter = require("events").EventEmitter;
var assign = require("object-assign");
var React = require("react");

var testDispatcher = new Dispatcher();

var CHANGE_EVENT = "change";
var testConstants = {
  TEST: "test"
};

// action
var TestAction = {
  test: function (testValue) {
    testDispatcher.dispatch({
      actionType: testConstants.TEST,
      value: testValue
    });
  }
};

// store
var _test = {value: null};

var TestStore = assign({}, EventEmitter.prototype, {
  getAll: function () {
    return _test;
  },
  emitChange: function () {
    this.emit(CHANGE_EVENT);
  },
  addChangeListener: function (callback) {
    this.on(CHANGE_EVENT, callback);
  },
  dispatcherIndex: testDispatcher.register(function (payload) {
    if (payload.actionType === testConstants.TEST) {
      // console.log(payload.value);
      _test.value = payload.value;
      TestStore.emitChange();
    }
  })
});

// view
var TestApp = React.createClass({
  getInitialState: function () {
    return TestStore.getAll();
  },
  componentDidMount: function() {
    var self = this;
    TestStore.addChangeListener(function () {
      self.setState(TestStore.getAll());
    });
  },
  render: function () {
    return (
      <div className="testApp">
        <TestForm />
        <TestDisplay data={this.state.value} />
      </div>
    );
  }
});

var TestForm = React.createClass({
  send: function (e) {
    e.preventDefault();
    var testValue = React.findDOMNode(this.refs.test_value).value.trim();
    TestAction.test(testValue);
    React.findDOMNode(this.refs.test_value).value = "";
    return;
  },
  render: function () {
    return (
      <form>
        <input type="text" ref="test_value" />
        <button onClick={this.send}>送信</button>
      </form>
    );
  }
});

var TestDisplay = React.createClass({
  render: function () {
    var message = this.props.data;
    return (
      <div>{message}</div>
    );
  }
});

React.render(
  <TestApp />,
  document.getElementById("content")
);