我正在重写我的应用程序以使用 Flux，但我在从 Stores 检索数据时遇到了问题。我有很多组件，它们嵌套了很多。其中一些大（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 个组件可能订阅 Stores 令人沮丧；
- 这是很难掌握的数据如何被更新，以什么顺序，因为每个组件独立获取数据;
- 即使您可能已经有一个处于状态的实体，您也必须将其 ID 传递给子代，子代将再次检索它（否则会破坏一致性）。
所有数据在顶层读取一次并传递给组件
当我厌倦了跟踪错误时，我尝试将所有数据检索放在顶层。然而，事实证明这是不可能的，因为对于某些实体，我有多层嵌套。
例如：
- A
Category包含UserAvatar为该类别做出贡献的人 s； - 一个
Article可能有几个Categorys。
因此，如果我想在 a 级别从 Stores 检索所有数据Article，我需要：
- 检索文章
ArticleStore； - 检索所有文章的类别
CategoryStore； - 从 中分别检索每个类别的贡献者
UserStore； - 以某种方式将所有这些数据传递给组件。
更令人沮丧的是，每当我需要一个深度嵌套的实体时，我都需要向每一级嵌套添加代码以额外传递它。
加起来
这两种方法似乎都有缺陷。我如何最优雅地解决这个问题？
我的目标：
商店不应该有疯狂的订阅者数量。如果父组件已经这样做了，那么每个
UserLink人都听是愚蠢的UserStore。如果父组件已从存储中检索到某个对象（例如
user），我不希望任何嵌套组件必须再次获取它。我应该能够通过props传递它。我不应该在顶层获取所有实体（包括关系），因为这会使添加或删除关系变得复杂。每次嵌套实体获得新关系（例如，类别获得 a
curator）时，我不想在所有嵌套级别引入新props。