[javascript] 컴포넌트가 Flux의 Stores에서 엔티티를 읽어야하는 중첩 수준은 무엇입니까?

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

이 접근 방식의 단점 :

• 잠재적으로 Stores를 구독하는 100 개의 구성 요소가 있다는 것은 실망 스럽습니다.
• 각 구성 요소가 데이터를 독립적으로 검색 하기 때문에 데이터가 업데이트되는 방식과 순서를 추적하기 가 어렵습니다 .
• 이미 상태에있는 항목 이있을 수 있지만 해당 ID를 자식에게 전달해야하며, 자식은 다시 검색하거나 일관성을 깨뜨립니다.

모든 데이터는 최상위 수준에서 한 번 읽고 구성 요소로 전달됩니다.

버그 추적에 지쳤을 때 검색하는 모든 데이터를 최상위 수준에 두려고했습니다. 그러나 이것은 일부 엔티티의 경우 여러 수준의 중첩이 있기 때문에 불가능한 것으로 판명되었습니다.

예를 들면 :

• A Category에는 UserAvatar해당 범주에 기여하는 사람들이 포함됩니다 .
• 에는 s Article가 여러 개있을 수 있습니다 Category.

따라서의 수준에서 Stores의 모든 데이터를 검색 Article하려면 다음을 수행해야합니다.

• 에서 기사 검색 ArticleStore;
• 에서 모든 기사의 카테고리를 검색합니다 CategoryStore.
• 에서 각 카테고리의 기여자를 별도로 검색합니다 UserStore.
• 어떻게 든 모든 데이터를 구성 요소로 전달합니다.

더욱 실망스럽게도 깊이 중첩 된 엔터티가 필요할 때마다 각 중첩 수준에 코드를 추가하여 추가로 전달해야합니다.

합산

두 접근법 모두 결함이있는 것 같습니다. 이 문제를 어떻게 가장 우아하게 해결합니까?

내 목표 :

• 상점에 엄청난 수의 구독자가 있어서는 안됩니다. 부모 구성 요소가 이미 그것을 UserLink하고 UserStore있다면 각 사람 이 듣는 것은 어리석은 일입니다.

• 부모 구성 요소가 저장소 (예 :)에서 일부 개체를 검색 한 user경우 중첩 된 구성 요소가 다시 가져올 필요가 없습니다. 소품을 통해 전달할 수 있어야합니다.

• 관계 추가 또는 제거가 복잡해지기 때문에 최상위 수준에서 모든 엔터티 (관계 포함)를 가져올 필요는 없습니다. 중첩 된 엔터티가 새 관계를 얻을 때마다 모든 중첩 수준에서 새 소품을 도입하고 싶지 않습니다 (예 : 범주가를 얻음 curator).