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).