React/Flux - распространение ошибок из действия для сохранения/компонента

Question

Это вопрос об распространении ошибок из действий реагирования/потока в хранилище, а затем обратно в компонент, ошибка не является валидацией, а скорее ее ошибкой вызова api, когда пытаясь обновить состояние магазина.

Вот довольно простой пример:

Компонент:

CityList.jsx 
    list of cities is held in a field thats bound to store data field, - This loops over these and writes list of City.jsx: 

City.jsx 
    Populates the city data to the user, including a toggle button to say whether they have visited or not, e.g: 

    name: {this.state.city.name} 
    country: {this.state.city.country} 
    visited: {this.state.city.visited} 

Toggling кнопки 'посещаемого' запускает акцию 'toggleVisited' с этим городом объектом:

Actions: 
    CityActions.js 
     toggleVisited(city) 
     Takes a city object, makes a request to the api to update the 'visited' value and pushes result to store 

Store: 
    CityStore.js 
     onToggleVisited(city) 
     Receives city object from the action and updates the relevant item in its cities array with new value 

Теперь что происходит, когда api, вызванный в CityActions, возвращает ошибку? Как сопоставить это с правильным компонентом, чтобы показать соответствующие сообщения об ошибках (красная рамка, текст ошибки и т. Д.), Чтобы указать, что обновление не удалось?

Моя первая мысль была, чтобы установить поле ошибки на объекте города после апи вызова в действии, а затем установить его обратно в магазин ищет что-то вроде этого:

{ 
    name: '', 
    country: '', 
    visited: '', 
    error: true 
} 

(ошибка может быть объектом) Затем компонент будет повторно отображать город и

поэтому компонент может прочитать поле ошибки и показать соответствующие сообщения об ошибках при его рендеринге.

Итак:

• Есть ли лучший способ справиться с этими ошибками?
• Если бы я хотел показать глобальную ошибку в верхней части страницы, то не нужно способ узнать, не зацикливая данные, чтобы проверить как минимум один экземпляр {error: true}, а затем визуализировать ошибку - это нет идеальный.
• Есть ли способ сопоставить ошибки с компонентами?

Answer 1

Чтобы сделать глобальную ошибку вверху страницы, вы можете сохранить глобальное сообщение об ошибке в CityStore.
Когда в ответе API содержится ошибка, вы обновляете глобальный объект ошибки в CityStore.
Когда представление получает состояние из CityStore, вам не нужно перебирать все города, чтобы проверить наличие ошибки.

Вы все равно можете сохранить error: true в самом городском объекте, например. если вы также хотите выделить какой-то город в представлении с фактической ошибкой.