Как правильно организовать fetch данных в Unidirectional Data Flow?

Question

[Владислав Килин]

Вопрос достаточно абстрактный, вот в чем его суть:

1. Положим, имеется некий набор сущностей, Entities. При загрузке SPA тем или иным способом я хожу в API за этими сущностями, /v1/entities/, получаю в ответ массив моделей, которые тут же запихиваю в store.
2. Когда пользователь переходит по ссылке на страницу сущности, я разумно предполагаю, что у него эта сущность уже загружена (иначе он не увидел бы ссылки), а значит просто выполняю action dispatch в store, сохраняя идентификатор выбранной сущности. Соответственно, когда мне нужно отобразить детали Entity, я просто выполняю find по сохраненному массиву моделей.
3. Существует сценарий, при котором пользователь получил ссылку на страницу SPA с деталями сущности, которой у него нет (и которая сама не прогрузится, например, из-за пейджинга). В таком случае мне нужно уметь запросить с API /v1/entities/N.

Теперь вопрос - в какой момент это нужно делать?

Сферическое хранилище в вакууме выглядит вот так:

export default {
  state: {
    entities: null,
    selectedEntityId: null
  },
  getters: {
    entities: state => state.entities,
    selectedEntity: state => state.entities && state.entities.find(e => e.id === state.selectedEntityId)
  },
  mutations: {
    recieveEntities (state, { entities }) {
      state.entities = entities
    },
    selectEntity (state, { entityId }) {
      state.selectedEntityId = entityId
    }
  },
  actions: {
    async fetchEntities ({ commit }) {
      let { data } = await axios.get('http://myapi.com/v1/entities')
      commit('recieveEntities', { entities: data })
    },
    selectEntity ({ commit }, { entityId }) {
      commit('selectEntity', { entityId })
      /*
        в теории здесь мне нужно делать запрос на сервер за деталями сущности
        но чтобы не делать запрос вхолостую, нужно уметь предсказывать,
        будет ли в соседнем action нужная мне entity, что сделать невозможно, ибо запрос асинхронный
      */
    }
  }
}

Answer 1

[wostex]

Я в таком случае делаю или в роутере route: { ... beforeEnter() ... } или в компоненте, который по нему открывается beforeCreate(), или created(), как удобнее, запрос данных этой entity с помощью dispatch('get-entity', id) например.

Если есть в массиве в хранилище - отдаем сразу, триггер анимации загрузки ставим на false, если нет - делаем экшн, который тянет ее по api, и добаляет в массив. В начале этого экшна - триггер анимации загрузки.