React Reflux Store擷取state值 Data Flow

// Component
class Plans extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      params: props.params
    };
  }

  render() {
    return (
      <div className="plan-list-container">
        <PlanList { ...this.state } />
      </div>
    );
  }

}      

// PlanList Component
class PlanList extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      page_loading: false
    };

    PlanActions.setParams(props.params);
  }      

// PlanActions
var PlanActions = Reflux.createActions([
  'setParams',
  'loadPlans',
  'loadPlansSuccess'
]);

PlanActions.loadPlans.preEmit = function(){
  PlanActions.loadPlansSuccess();
};      

// Store
var PlanStore = Reflux.createStore({
  init() {
    this.listenToMany(PlanActions);
  },

  setParams(params) {
    this.params = params;
  },

  loadPlans() {
    this.trigger({ 
      loading: true
    });
  },

  loadPlansSuccess() {
    $.ajax({
        url: this.ajaxApi,
        dataType: 'json',
        data: {
          sku: this.params.sku
        },
        cache: true,
        success: function(data) {      

有疑問或技術交流，掃描公衆号一起讨論學習。

更多React線上學習通路：http://each.sinaapp.com/react/index.html