结构：如何使用 mobx-state-tree 表示搜索输入、搜索查询和搜索结果？

Question

我有一个使用 mobx-state-tree 的应用，目前有几个简单的商店：

Article 代表一篇文章，来自第三方 API 或内部撰写
ArticleStore 包含对文章的引用：{ articles: {}, isLoading: bool }

简单场景

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

用户导航至 /article/{articleUri}
articleStoreInstance.fetch([articleUri]) returns 相关文章
ID 在渲染函数中获取，并使用 articleStoreInstance.articles.get(articleUri)

复杂场景

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

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

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

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

Answer 1

您可能需要一个 Search 存储来跟踪以下信息：

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

那么为了避免在2处存储文章，查询结果不要使用Article模型，而是引用Article模型。任何时候查询，实际结果将保存在现有商店 ArticleStore 中，而 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
    })
  }))

希望这就是您要找的。

结构：如何使用 mobx-state-tree 表示搜索输入、搜索查询和搜索结果？

Structure: How to represent a search input, search query, and search results using mobx-state-tree?

reactjs

mobx

mobx-state-tree

简单场景

复杂场景