我正在重写我的应用程序以使用Flux，但从商店检索数据时遇到问题。我有很多组件，它们嵌套很多。其中有些是大（Article），有些是小而简单（UserAvatar，UserLink）。
我一直在努力在组件层次结构中的什么地方应该从商店读取数据。
我尝试了两种极端的方法，但我都不喜欢：
所有实体组件都读取自己的数据
需要从商店中获取一些数据的每个组件仅接收实体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传递给子代，子代将再次检索它（否则会破坏一致性）。
在顶层读取所有数据，然后向下传递到组件
当我厌倦了跟踪错误时，我试图将所有检索到的数据放在顶层。但是，事实证明这是不可能的，因为对于某些实体，我具有多个嵌套级别。
例如：
- 一个
Category包含UserAvatar的谁该类别有助于人们的; - 一个
Article可能有几个Categorys。
因此，如果我想以的级别从商店中检索所有数据，则Article需要：
- 从中检索文章
ArticleStore; - 从
CategoryStore; 检索所有文章类别。 - 分别从
UserStore; 检索每个类别的贡献者。 - 以某种方式将所有数据传递到组件。
更令人沮丧的是，每当我需要一个深层嵌套的实体时，我都需要向每个嵌套级别添加代码以附加地传递它。
加起来
两种方法似乎都有缺陷。如何最优雅地解决这个问题？
我的目标：
商店不应有疯狂的订户数量。如果父组件已经这样做，每个
UserLink人都听不懂UserStore。如果父组件已经从存储中检索到某个对象（例如
user），我不希望任何嵌套的组件都必须再次获取它。我应该能够通过道具传递它。我不必在顶层获取所有实体（包括关系），因为这会使添加或删除关系复杂化。我不想每次嵌套实体获得新关系（例如category获得
curator）时都在所有嵌套级别引入新道具。