1

我有一个应用程序正在使用mobx-state-tree，目前有一些简单的商店：

  • Article表示一篇文章，可以是通过第 3 方 API 获取的，也可以是内部编写的
  • ArticleStore包含对文章的引用：{ articles: {}, isLoading: bool }

简单场景

此设置适用于简单的用例，例如基于 ID 获取文章。例如

  1. 用户导航到/article/{articleUri}
  2. articleStoreInstance.fetch([articleUri])返回有问题的文章
  3. ID 在渲染函数中获取，并使用articleStoreInstance.articles.get(articleUri)

复杂场景

对于更复杂的场景，如果我想根据复杂的查询获取一组文章，例如{ offset: 100, limit: 100, freeTextQuery: 'Trump' }，我应该：

  1. 拥有一个全球SearchResult商店，仅链接到用户搜索过的文章
  2. 实例化一个一次性SearchResult存储，只要我需要它就可以传递？
  3. 将查询和一般 UI 状态完全排除在商店之外？

我应该补充一点，我想在页面加载之间将文章保留在商店中，以避免一遍又一遍地重新获取相同的内容。

是否有某种标准化的方法来解决这个问题？有什么例子可以看吗？

4

1 回答 1

2

您可能需要一个Search跟踪以下信息的商店：

  • 查询参数（偏移量、限制等）
  • 查询结果（最后一次搜索的结果）
  • （可选）查询状态（isLoading）

那么为了避免将文章存储在2个地方，查询结果不应该使用Articlemodel，而是引用Articlemodel。任何时候查询，实际结果都会保存在现有的 storeArticleStore中，并且Search只保存引用：

import { types, getParent, flow } from 'mobx-state-tree'

const Search = types.model({
    params: // your own params info
    results: types.array(types.reference(Article))
  }).views(self => ({
    get parent() {
      return getParent(self) // get root node to visit ArticleStore
    }
  })).actions(self => ({
    search: flow(function*(params) {
      this.params = params // save query params
      const result = yield searchByQuery(query) // your query here
      this.parent.articleStore.saveArticles(result) // save result to ArticleStore
      this.results = getArticleIds(result) // extract ids here for references
    })
  }))

希望这是您正在寻找的。

于 2018-08-06T07:41:22.310 回答