最佳答案
在什么嵌套级别上，组件应该从 Stores in Flux 读取实体？
我重写我的应用程序使用通量和我有一个问题，检索数据从商店。我有很多组件，它们有很多巢。它们有的大(Article) ，有的小而简单(UserAvatar，UserLink)。
我一直在纠结在组件层次结构中我应该在哪里读取来自 Stores 的数据。
我尝试了两种极端的方法，两种我都不太喜欢:
所有实体组件都读取自己的数据
每个需要从 Store 获得一些数据的组件只接收实体 ID，并自行检索实体。
例如，Article被传递 articleId，UserAvatar和 UserLink被传递 userId。
这种方法有几个明显的缺点(在代码示例中讨论)。
var Article = React.createClass({
mixins: [createStoreMixin(ArticleStore)],
propTypes: {
articleId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
article: ArticleStore.get(this.props.articleId);
}
},
render() {
var article = this.state.article,
userId = article.userId;
return (
<div>
<UserLink userId={userId}>
<UserAvatar userId={userId} />
</UserLink>
<h1>{article.title}</h1>
<p>{article.text}</p>
<p>Read more by <UserLink userId={userId} />.</p>
</div>
)
}
});
var UserAvatar = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: {
userId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
user: UserStore.get(this.props.userId);
}
},
render() {
var user = this.state.user;
return (
<img src={user.thumbnailUrl} />
)
}
});
var UserLink = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: {
userId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
user: UserStore.get(this.props.userId);
}
},
render() {
var user = this.state.user;
return (
<Link to='user' params={{ userId: this.props.userId }}>
{this.props.children || user.name}
</Link>
)
}
});
这种做法的缺点是:
- 令人沮丧的是，有100年代的组件潜在地订阅商店;
- 它是 很难跟踪数据是如何更新的以及按什么顺序更新的，因为每个组件独立地检索它的数据;
- 即使 已经有一个处于状态的实体，也必须将其 ID 传递给子实体，子实体将再次检索该实体(否则将破坏一致性)。
所有数据在顶层读取一次并传递给组件
当我厌倦了追踪 bug 时，我试图把所有的数据检索放在顶层。然而，事实证明这是不可能的，因为对于某些实体，我有几个嵌套级别。
例如:
Category包含对该类别有贡献的人的UserAvatar;- 一个
Article可能有几个Category。
因此，如果我想在 Article级别从 Stores 检索所有数据，我需要:
- 从
ArticleStore中检索文章; - 从
CategoryStore中检索所有文章的类别; - 分别从
UserStore中检索每个类别的贡献者; - 以某种方式将所有数据传递给组件。
更令人沮丧的是，无论何时我需要一个深度嵌套的实体，我都需要向每个嵌套级别添加代码来额外地传递它。
总结
这两种方法似乎都有缺陷。我如何最优雅地解决这个问题？
我的目标:
商店不应该有这么多疯狂的用户。如果父组件已经在监听
UserStore，那么每个UserLink监听UserStore就是愚蠢的。如果父组件已经从存储中获取了一些对象(例如
user) ，我不希望任何嵌套组件必须再次获取它。我应该可以通过道具传球。我不应该必须在顶层获取所有实体(包括关系) ，因为这会使添加或删除关系变得复杂。我不想在每次嵌套实体得到一个新的关系时(例如，分类得到一个
curator)在所有嵌套级别引入新的道具。
