Обработка ошибок компонентов с помощью ngrx - PullRequest
Новая
       72

Обработка ошибок компонентов с помощью ngrx

0 голосов
/ 12 октября 2018

Предположим, у меня есть следующий сценарий:

  • Компонент открытого списка
  • Отправка нового LoadList (), который обновляет хранилище со списком данных
  • Подписаться на состояние списка и отображаемый список
  • В строке списка нажмите открыть компонент Details (который отображается рядом со списком)
  • Отправка нового LoadDetails (), который обновляет тот же список магазинас элементом
  • Подпишитесь на детали и отображайте информацию об элементе

Это работает, как ожидалось.

Теперь предположим следующий сценарий:

  • Компонент открытого списка
  • Отправка нового LoadList (), который обновляет хранилище со списком данных
  • Подписаться на состояние списка и список отображения
  • В строке списка нажмите открыть компонент Details (который отображается рядом со списком)
  • Отправка нового LoadDetails () , который завершается с ошибкой
  • Подписаться на подробности и отображать диалог ошибок только на деталяхonent (список должен остаться без изменений)

И это только базовый пример.Что делать, если у меня одновременно видны несколько компонентов, получающих данные из одного и того же хранилища ... напр.Некоторое хранилище реестра, в котором хранится список элементов, некоторые из которых требуются для одного компонента, а некоторые - для другого компонента + может быть, только обновление элемента завершается неудачно, и в это же время снова отображается его собственный компонент ...

Есть ли какой-нибудь элегантный способ обработки ошибок такого рода?

PS: я могу добиться этого с помощью некоторой карты, которая может содержать ошибки для каждого элемента и действия, но это не звучит правильно + тожемного шаблонного ...

1 Ответ

0 голосов
/ 12 октября 2018

Если вы собираетесь использовать одни и те же объекты данных в нескольких местах.Мне нравится хранить их в состоянии под уникальным идентификатором в виде карты.Затем создайте другую структуру данных для хранения групп идентификаторов элементов.Это часто, как я храню постраничные наборы объектов.

Когда вы возвращаете свои данные из API / DB и т. Д., Храните их в двух местах в Магазине.

, например: 

// Store
personPages$: {
    1: {
        meta: {pageSize: 3, totalItems: 6},
        results: [1, 2, 4]
    },
    2: {
        meta: {pageSize: 3, totalItems: 6},
        results: [7, 3, 8]
    }
}
...
personEntities$: {
    1: {
        name: Han Solo, age: 37, weapon: blaster 
    },
    2: { 
       name: Luke Skywalker, age: 22, weapon: lightsaber
    } 
    ...
}

Затем в своем шаблоне, где вы хотите отобразить список, вы просто зацикливаете массив результатов и извлекаете объект из карты сущностей. 

<li *ngFor="let id of (personPages$ | async)[1]?.results">
    {{(personEntities$ | async)[id]?.name }}
</li>

Надеюсь, это поможет.

...