组件的 Flux 个人商店答案

【问题标题】：Flux personal store for component组件的 Flux 个人商店
【发布时间】：2015-07-02 17:46:14
【问题描述】：

我有这样的用户界面：

First User: <UserSelect value={this.state.user1} />
Second User: <UserSelect value={this.state.user2} />
...
Other User: <UserSelect value={this.state.user3} />

UserSelect 是用于选择具有自动完成功能的用户的组件。可以有很多。一种类型的组件可以在 Flux 中监听单例 Store。但在我的例子中，一个UserSelect 组件的值变化会影响其他组件的状态。

我应该如何构建我的应用来解决这个问题？

在componentDidMount 中为每个组件创建一个商店？

// not flux way
componenDidMount: function() {
  this.usersStore = UsersStore.createStore();
  this.usersStore.on('change', ...);
}

或者在商店中制作类似查询选择器的东西？

// flux way, but affects all mounted components on page
componenDidMount: function() {
  UsersStore.on('change', this.update);
},

update: function() {
  this.setState({
    items: UserStore.get({ loginLike: this.state.inputValue })
  });
},

handleInputChange: function(e) {
  this.setState({ inputValue: e.target.value });
  loadUsersAction({ loginLike: e.target.value });
}

还是……？

【问题讨论】：

标签： javascript reactjs flux

【解决方案1】：

您可以使用第二种方法并执行查询选择器之类的操作，这样就可以了。只是不要忘记正确的通量流。

如果您想长期获得真正出色的性能和更轻松的开发，请使用不可变数据结构。然后，您将不必担心影响其他组件（关于性能）。这里是一篇简单的介绍文章：http://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/

【讨论】：

感谢您的链接。但我仍然不喜欢组件有不必要的订阅和调用。