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

【问题标题】：Structure: How to represent a search input, search query, and search results using mobx-state-tree?结构：如何使用 mobx-state-tree 表示搜索输入、搜索查询和搜索结果？
【发布时间】：2018-06-09 14:01:59
【问题描述】：

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

Article 代表一篇文章，通过第三方 API 获取或内部编写
ArticleStore 持有对文章的引用：{ articles: {}, isLoading: bool }

简单场景

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

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

复杂场景

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

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

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

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

【问题讨论】：

标签： reactjs mobx mobx-state-tree

【解决方案1】：

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

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

那么为避免将文章存储在2个地方，查询结果不要使用Article模型，而是引用Article模型。任何时候查询，实际结果都会保存在已有的 store 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
    })
  }))

希望它是您正在寻找的。p>

【讨论】：