Estou reescrevendo meu aplicativo para usar o Flux e tenho um problema com a recuperação de dados das lojas. Eu tenho muitos componentes, e eles aninham muito. Alguns deles são grandes (Article), alguns são pequenos e simples (UserAvatar, UserLink)

Eu tenho lutado com onde na hierarquia de componentes eu deveria ler os dados das lojas.
Eu tentei duas abordagens extremas, nenhuma das quais gostei:

Todos os componentes da entidade leem seus próprios dados

Cada componente que precisa de alguns dados do Store recebe apenas o ID da entidade e recupera a entidade por conta própria.
Por exemplo,Article é passadoarticleId, UserAvatar eUserLink Estão passadosuserId.

Essa abordagem tem várias desvantagens significativas (discutidas no exemplo de código).

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>
    )
  }
});

Desvantagens dessa abordagem:

É frustrante ter componentes 100s potencialmente assinando lojas;Estádifícil acompanhar como os dados são atualizados e em que ordem porque cada componente recupera seus dados independentemente;Mesmo que você possajá tiver uma entidade no estado, você é forçado a passar seu ID para filhos, que o recuperam novamente (ou quebram a consistência).Todos os dados são lidos uma vez no nível superior e transmitidos aos componentes

Quando estava cansado de rastrear bugs, tentei colocar todos os dados recuperados no nível superior. No entanto, isso se mostrou impossível, porque para algumas entidades eu tenho vários níveis de aninhamento.

Por exemplo:

A Category contémUserAvatars de pessoas que contribuem para essa categoria;AArticle pode ter váriosCategorys.

Portanto, se eu quiser recuperar todos os dados das lojas no nível de umArticle, Eu precisaria:

Recuperar artigo deArticleStore;Recupere todas as categorias de artigos deCategoryStore;Recupere separadamente os colaboradores de cada categoria deUserStore;De alguma forma, passe todos esses dados para os componentes.

Ainda mais frustrante, sempre que eu precisar de uma entidade profundamente aninhada, seria necessário adicionar código a cada nível de aninhamento para transmiti-lo adicionalmente.

Resumindo

Ambas as abordagens parecem falhas. Como resolvo esse problema de maneira mais elegante?

Meus objetivos:

As lojas não devem ter um número insano de assinantes. É estúpido para cadaUserLink ouvirUserStore se os componentes pai já fizerem isso.

Se o componente pai recuperou algum objeto da loja (por exemplo,user), Não quero que nenhum componente aninhado precise buscá-lo novamente. Eu deveria ser capaz de passar por adereços.

Eu não deveria ter que buscar todas as entidades (incluindo relacionamentos) no nível superior, pois isso complicaria a adição ou remoção de relacionamentos. Não quero introduzir novos adereços em todos os níveis de aninhamento sempre que uma entidade aninhada obtém um novo relacionamento (por exemplo, categoria obtém umcurator)