Question

我使用react和flux（facebook实现）。在我的组件中，我应该做类似的事情：

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

问题是this.state.userId仅在UserActions.loadUser触发请求完成时定义。

所以解决这个问题的唯一方法就是：

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

你需要在UserAction.loadUser收听的商店。
您调用此操作。
在您的组件中，您注册了收听新商店的回调。
当您的商店调用您的回调时，您将在此回调函数中访问此商店中的userId。（我不确定，但也许你的UserStore做我写的）。
在此回调函数中，您可以调用

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

在渲染功能中，您可以检查是否有userId。如果没有则显示一些加载信息。如果tez然后显示正常的rending数据。

Answer 2

您可以扩展loadUser方法以接受带有有效负载作为参数的回调。

即：

loadUser(username, callback) {
  // some ajax stuff
  callback(payload);
}

然后，在您的jsx文件中，您可以编写如下内容：

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

等待另一个行动的最佳方式

2 个答案: