Na jakim poziomie zagnieżdżania komponenty powinny odczytywać byty ze składów w Strumieniu?

Przepisuję aplikację na Flux i mam problem z pobieraniem danych ze sklepów. Mam dużo komponentów i dużo gniazd. Niektóre z nich są Duże (Article), niektóre małe i proste (UserAvatar, UserLink).

Zmagałem się z tym, gdzie w hierarchii komponentów powinienem odczytywać dane ze sklepów.
Próbowałem dwóch ekstremalnych podejść, z których żadne mi się nie spodobało: {]}

Wszystkie komponenty encji odczytują własne dane

Każdy komponent, który potrzebuje danych z Store otrzymuje tylko identyfikator encji i sam pobiera encję.
Na przykład, Article jest przekazywana articleId, UserAvatar i UserLink są przekazywane userId.

To podejście ma kilka istotnych wad (omówionych w próbce kodu).

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

Wady tego podejścia:

To jest frustrujące mieć komponenty 100s potencjalnie subskrybujące sklepy; [37]}
• trudno jest śledzić jak dane są aktualizowane i w jakiej kolejności ponieważ każdy komponent pobiera jego dane niezależnie;
• nawet jeśli możeszjuż mieć podmiot w stanie, jesteś zmuszony przekazać jego identyfikator dzieciom, które odzyskają go ponownie (lub złamać spójność).

Wszystkie dane są odczytywane raz na najwyższym poziomie i przekazywane w dół do komponentów

Kiedy byłem zmęczony tropieniem błędów, starałem się umieścić wszystkie dane na najwyższym poziomie. Okazało się to jednak niemożliwe, ponieważ dla niektórych podmiotów mam kilka poziomów gniazdowanie.

Na przykład:

• a Category zawiera UserAvatars osób, które przyczyniają się do tej kategorii;
• An Article może mieć kilka Categorys.

Dlatego gdybym chciał odzyskać wszystkie dane ze sklepów na poziomie Article, musiałbym:

• Odzyskaj artykuł z ArticleStore;
• Odzyskaj wszystkie kategorie artykułów z CategoryStore;
• oddzielnie pobieramy współpracowników każdej kategorii z UserStore;
• jakoś przejść wszystkie te dane aż do składników.

Jeszcze bardziej frustrujące jest to, że ilekroć potrzebuję głęboko zagnieżdżonego bytu, muszę dodać kod do każdego poziomu zagnieżdżenia, aby dodatkowo przekazać go w dół.

Podsumowanie

Oba podejścia wydają się wadliwe. Jak najbardziej elegancko rozwiązać ten problem?

Moje cele:

• Sklepy nie powinny mieć szalonej liczby abonentów. To głupie dla każdego UserLink słuchać UserStore jeśli komponenty rodzica już to.

• Jeśli komponent macierzysty odzyskał jakiś obiekt ze store (np. user), nie chcę, aby jakiekolwiek zagnieżdżone komponenty musiały go ponownie pobrać. Powinienem być w stanie przekazać to przez rekwizyty.

• Nie powinienem pobierać wszystkich encji (w tym relacji) na najwyższym poziomie, ponieważ skomplikowałoby to dodawanie lub usuwanie relacji. Nie chcę wprowadzać nowych rekwizytów na wszystkich poziomach zagnieżdżania za każdym razem, gdy zagnieżdżona jednostka otrzymuje nową relację (np. a curator).