javascript - 等待另一个不断变化的 Action 的最佳方法

Question

我正在使用 React 和 Flux(Facebook 实现)。在我的组件中我应该做类似的事情:

componentDidMount () {
  UserActions.loadUser(this.props.username);
  PublicationActions.findByUser(this.state.userId);
  UserStore.on('CHANGE', this._setUser);
  // ...
},

问题是只有当UserActions.loadUser触发的请求完成时才会定义this.state.userId。

所以解决这个问题的唯一方法是添加如下内容:

if (this.state.userId && !this.state.publications) {
  PublicationActions.findByUser(this.state.userId);
}

直接到render()方法。我不喜欢这个解决方案，因为 render() 用于渲染，我不想弄乱其中的任何业务逻辑。

我发现的唯一可接受的解决方案是针对这种情况有特殊的组件层次结构，例如:

<User username={someVar}>
  <PublicationsList userId={this.state.userId}/>
</User>

这将强制 PublicationsList 成为智能组件(具有状态等)，但我希望它成为愚蠢的渲染器。这是唯一的方法还是有更好的方法？

Answer 1

1. 您需要在 UserAction.loadUser 完成时监听的存储。
2. 您调用此操作。
3. 在您的组件中，您注册回调来监听您的新商店。
4. 当您的商店调用回调时，您可以在此回调函数中访问该商店的 userId。 (我不确定，但也许你的 UserStore 是我写的)。
5. 在此回调函数中您调用

PublicationActions.findByUser(YourStore.getState().userId)

在渲染函数中，您检查是否有 userId。如果没有则显示一些加载信息。如果是 tez，则显示正常的渲染数据。