Reflux：组件没有从 store 中获取触发的事件

Question

按照udemy的一个很好的React课程，我使用Reflux创建了一个商店，但是，来自商店的触发事件无法被组件捕获。

我的问题： 为什么在 component.jsx 中使用 ImageStore.orderImage(TODO 1) 不起作用：this.onChange 不会被触发，而 ImageStore.getImage 和 Actions.orderImage 都可以。

感谢您的帮助。

component.jsx 内部：

  mixins: [
    Reflux.listenTo(ImageStore,'onChange')
  ],

  componentWillMount: function () {
    //TODO 1: why ImageStore.orderImage does not work: this.onChange will not be triggered
    // ImageStore.orderImage(this.props.params.id);     // WHY this does not work? this.onChange will not be triggered.
    // ImageStore.getImage(this.props.params.id);       // this works
    Actions.orderImage(this.props.params.id);           // this works, will use this method
  },

  onChange: function () {
    console.log("imageComponent: get a new event from imageStore");
    this.setState({
      image: ImageStore.findImage(this.props.params.id)
    });
  }

在 store.jsx 中

listenables: [Actions],

  getImage: function (imageID) {
    API.get('gallery/image/'+imageID)
    .then(function(json){
      if(this.images){
        this.images.push(json.data);
      } else {
        this.images = [json.data];
      }
      this.updateStore();
    }.bind(this));
  },

  orderImage: function (imageID) {
    console.log("imageStore: get a new image order:", imageID);
    var image = _.findWhere(this.images, {id:imageID});
    if (!image) {
      this.getImage(imageID);
      console.log("imageStore: I start to get image:", imageID);
    }
    else {
      console.log("imageStore: I already have the image:", imageID);
      this.trigger('change',this.images);
      this.updateStore();
    }
  },

  findImage: function (imageID) {
    var image = _.findWhere(this.images, {id:imageID});
    if (image) {
      return image;
    } else {
      return null;
    }
  },

  updateStore: function () {
    console.log("imageStore: trigger the change");
    this.trigger('change',this.images);
  }

Answer 1

ImageStore.findImage 并不酷。您想使用操作让商店执行查找图像。然后触发一个事件。使用回流，您可以在触发器中包含一个参数以进行选择更新。

import Reflux from 'reflux';

import Actions from '../actions/sa.Actions';
import AddonStore from './Addon.Store';
import MixinStoreObject from './Mixin.Store';

function _GotData(data) { this.data1 = data; BasicStore.trigger('data1'); }

let BasicStoreObject = {
  init() { this.listenTo(AddonStore, this.onAddonTrigger); },
  data1: {},
  listenables: Actions,
  mixins: [MixinStoreObject],
  onGotData1: _GotData,
  onAddonTrigger() { BasicStore.trigger('data2'); },
  getData1() { return this.data1; },
  getData2() { return AddonStore.data2; },
  getData3() { return this.data3; }
}
const BasicStore = Reflux.createStore(BasicStoreObject);
export default BasicStore;

import React from 'react';

import BasicStore from '../stores/Basic.Store';

let AppCtrlSty = {
  height: '100%',
  padding: '0 10px 0 0'
}

const getState = () => {
  return {
    Data1: BasicStore.getData1(),
    Data2: BasicStore.getData2(),
    Data3: BasicStore.getData3()
  };
};

class AppCtrlRender extends React.Component {
   render() {
    let data1 = JSON.stringify(this.state.Data1, null, 2);
    let data2 = JSON.stringify(this.state.Data2, null, 2);
    let data3 = JSON.stringify(this.state.Data3, null, 2);
    return (
      <div id='AppCtrlSty' style={AppCtrlSty}>
        React 0.14 ReFlux with SuperAgent<br/><br/>
        Data1: {data1}<br/><br/>
        Data2: {data2}<br/><br/>
        Data3: {data3}<br/><br/>
      </div>
    );
  }
}

export default class AppCtrl extends AppCtrlRender {
  constructor() {
    super();
    this.state = getState();
  }

  componentDidMount = () => { this.unsubscribe = BasicStore.listen(this.storeDidChange); }
  componentWillUnmount = () => { this.unsubscribe(); }
  storeDidChange = (id) => {
    switch (id) {
      case 'data1': this.setState({Data1: BasicStore.getData1()}); break;
      case 'data2': this.setState({Data2: BasicStore.getData2()}); break;
      case 'data3': this.setState({Data3: BasicStore.getData3()}); break;
      default: this.setState(getState());
    }
  }
}