我正在重写我的应用程序以使用Flux，但是从商店检索数据时遇到问题。我有很多组件，它们嵌套很多。其中有些是大（Article），有些是小而简单（UserAvatar，UserLink）。

我一直在努力从组件存储层次结构中读取数据。
我尝试了两种极端的方法，但我都不喜欢：

所有实体组件都读取自己的数据

需要从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传递给子代，子代将再次检索它（或破坏一致性）。

所有数据在顶层都读取一次，然后传递给组件

当我厌倦了跟踪错误时，我试图将所有检索数据放在顶层。但是，事实证明这是不可能的，因为对于某些实体，我具有多个层次的嵌套。

例如：

• 一个Category包含UserAvatar的谁该类别有助于人们的;
• 一个Article可能有几个Category秒。

因此，如果我想以的级别从商店中检索所有数据，则Article需要：

• 从中检索文章ArticleStore;
• 从CategoryStore; 检索所有文章类别。
• 从中分别检索每个类别的贡献者UserStore。
• 以某种方式将所有数据传递到组件。

更令人沮丧的是，每当我需要一个深度嵌套的实体时，我都需要向每个嵌套级别添加代码，以附加地传递它。

加起来

两种方法似乎都有缺陷。如何最优雅地解决这个问题？

我的目标：

• 商店不应有疯狂的订户数量。如果父组件已经这样做，每个UserLink人都听不懂UserStore。

• 如果父组件已从存储中检索到某个对象（例如user），则我不希望任何嵌套的组件都必须再次获取它。我应该能够通过道具传递它。

• 我不必在顶层获取所有实体（包括关系），因为这会使添加或删除关系复杂化。我不想每次嵌套实体获得新关系（例如category获得curator）时都在所有嵌套级别引入新道具。