在复杂的ReactJS应用程序中经常调用的RefluxJS呈现()方法

Question

我有一个RefluxJS应用程序，它有几个存储区和一个相当深的组件层次结构。我试图使组件非常独立，每个组件都连接到它需要呈现的商店；商店本身有时会调用其他商店所听的操作。

我发现我得到了对组件的呈现()方法的大量虚假调用，因为两个存储可能侦听相同的操作，而层次结构中的不同组件可能会侦听这些不同的存储。这会影响用户体验，因为有时会有一点滞后。

下面是一些代码：

var Actions = Reflux.createActions(['changeUser']);
Actions.changeUser.preEmit = () => console.log('Action emit: changeUser');

var UserStore = Reflux.createStore({
  listenables: [Actions],

  onChangeUser(user) {
    this.trigger(user);
  }
});

var MessageStore = Reflux.createStore({
  listenables: [Actions],

  onChangeUser(user) {
    setTimeout(() => {
      // pretend we had to go to an API or something to get this
      var message = "Welcome to the app!";
      this.trigger(message);
    }, 500);
  },
});

var App = React.createClass({
  mixins: [Reflux.connect(UserStore, 'user')],

  render() {
    console.log('Component render: App');

    if (!this.state.user) {
      return (
        <button onClick={() => Actions.changeUser('Some User')}>
          Click to make stuff happen
        </button>
      );
    }

    return (
      <div>
        <div>Hello, {this.state.user}.</div>
        <Message / >
      </div>
    );
  }
});

var Message = React.createClass({
  mixins: [Reflux.connect(MessageStore, 'message')],

  render() {
    console.log('Component render: Message');

    return <div>Your message: {this.state.message}</div>;
  }
});

ReactDOM.render( <App/> , document.getElementById('app'));

小提琴：https://jsfiddle.net/9xwnxos6/

这太简单了(在本例中，我可能只是添加了某种类型的加载指示符)，但说明了一个基本问题，即在执行任务时，您可以看到UI通过中间状态进行转换。

如何改进我的React/反流设计，以避免从单个交互中多次呈现触发？

Answer 1

似乎我的问题来自于违反了一些好的React/Flux实践：

1. 不要在商店内触发操作
2. 仅连接到高级组件中的存储

我正在进行重构，以便将Store连接从低级组件中删除。我对此并不着迷，因为这意味着我必须通过这些深层次的组件来获得它们所需要的位置。但这似乎是构建反流应用程序的“正确”方法。

如果在未来几天内没有其他人发表答案，我将接受这个答案。