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

What you need might be a Search store which keeps track of following information:

• Query params (offset, limit, etc.)
• Query results (results of the last search)
• (Optional) Query state (isLoading)

Then to avoid storing articles in 2 places, the query results should not use Article model, but reference to Article model. Anytime you query, the actual result will be saved in existing store ArticleStore, and Search only holds references:

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
    })
  }))

Hope it's what you are looking for.