相关疑难解决方法(0)

我正在重写我的应用程序以使用Flux,我在从商店检索数据时遇到问题.我有很多组件,它们很多.其中一些是大(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: { …

我刚刚开始使用flux(现在使用redux),我想知道如何处理关系.
举个例子,我们可以使用Trello,它有包含卡的列的板.

一种方法是为板子安装一个存储/减速器,并在其中包含所有数据,但这意味着一些非常胖的存储,因为它们必须包含列和卡的所有操作.

我见过的另一种方法是将嵌套资源分成例如BoardStore,ColumnStore和CardStore,并使用它们的id作为参考.

这是一个我有点困惑的例子:你可以有一个名为addCard的动作创建者向服务器发出请求,创建一张包含所有数据的卡片.如果您正在进行乐观更新,您之前会在您的某个商店中创建一个卡片对象,但在您收到请求之前,您无法知道它将具有的ID.

简而言之:

• 点击addCard
• addCard会发出请求,同时返回ADD_CARD_TEMP类型的操作
• 您收到请求并返回ADD_CARD类型的操作,其中存储/缩减器更改ID.

有没有推荐的方法来处理这个案子？嵌套的存储/缩减器对我来说看起来有点傻,但是否则你最终会得到非常复杂的存储,所以它看起来真的很妥协.

我正在将一个现有的应用程序移植到Flux,我对一个主题感到有些困惑.假设我有几个返回两级或三级嵌套对象的API端点.

例如,GET /articles可以返回架构的JSON响应

articles: article*

article: {
  author: user,
  likers: user*
  primary_collection: collection?
  collections: collection*
}

collection: {
  curator: user
}

如您所见,不同级别的嵌套有各种各样的用户:

• articles[i].author
• articles[i].likers[i]
• articles[i].primaryCollection.curator
• articles[i].collections[i].curator

如果我想在UserStore任何时候获取文章时使用新数据进行更新,我必须编写一个怪异的方法来检查文章API响应中的所有嵌套实体.此外,会有很多重复,因为还有其他API端点具有不同的模式,有时文章嵌入在用户内(例如GET /user/published).

Flux商店是否有更清晰的方法从所有API响应中提取嵌套实体？