Структура: Как представить входные данные для поиска, поисковый запрос и результаты поиска с помощью дерева состояний mobx? - PullRequest
Новая
       25

Структура: Как представить входные данные для поиска, поисковый запрос и результаты поиска с помощью дерева состояний mobx?

0 голосов
/ 09 июня 2018

У меня есть приложение, использующее mobx-state-tree, которое в настоящее время имеет несколько простых магазинов:

  • Article представляет статью, полученную из стороннего API или написанную собственными силами
  • ArticleStore содержит ссылки на статьи: { articles: {}, isLoading: bool }

Простой сценарий

Эта настройка хорошо работает для простых случаев использования, таких как выборка статей на основе идентификатора,Например,

  1. Пользователь переходит к /article/{articleUri}
  2. articleStoreInstance.fetch([articleUri]), возвращает искомую статью
  3. Идентификатор выбирается в функции рендеринга и отображается с использованием articleStoreInstance.articles.get(articleUri)

Сложный сценарий

Для более сложного сценария, если я хочу получить набор статей на основе сложного запроса, например, { offset: 100, limit: 100, freeTextQuery: 'Trump' }, я должен тогда:

  1. Иметь глобальный SearchResult магазин, который просто ссылается на статьи, которые пользователь искал
  2. Создание единовременного SearchResult магазина, который я прохожу до тех пор, покаМне это нужно?
  3. Хранить запросы и общее состояние пользовательского интерфейса вне магазинов вообще?

Я должен добавить, что я хотел бы хранить статьи в магазинах между загрузками страниц, чтобы избежатьповторная загрузка одного и того же контента снова и снова.

Существует ли несколько стандартизированный способ решения этой проблемы?Какие-нибудь примеры, чтобы посмотреть?

1 Ответ

0 голосов
/ 06 августа 2018

Вам может понадобиться хранилище 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
    })
  }))

Надеюсь, это то, что вы ищете.

...