React / Flux - 从操作到存储/组件的错误传播

Question

这是一个关于从react / flux操作到存储然后再返回组件的错误传播的问题，错误不是验证，而是在尝试更新存储状态时它的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}

切换访问过的＆＃39;按钮触发＆＃39; toggleVisited＆＃39;对该城市对象采取行动：

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

现在当CityActions中调用的api返回错误时会发生什么？如何将其映射到正确的组件以显示相应的错误消息（红色边框，错误文本等）以指示更新失败？

我最初的想法是在动作中的api调用之后在city对象上设置一个错误字段，然后在商店中将其设置回来，如下所示：

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

（错误可能是一个对象）然后组件将重新渲染城市和

然后组件可以读取错误字段并在呈现时显示相关的错误消息。

所以：

• 有更好的方法来处理这些错误吗？
• 如果我想在页面顶部显示全局错误，则不会 知道如何不通过数据循环来检查至少 {error：true}的一个实例，然后呈现错误 - 这不是 理想的。
• 有没有办法将错误映射到组件？

Answer 1

要在页面顶部呈现全局错误，您可以在CityStore中存储全局错误消息 当API的响应包含错误时，您将更新CityStore中的全局错误对象 当视图从CityStore获取状态时，您无需遍历所有城市以检查错误。

您仍然可以将error: true保留在城市对象本身中，例如如果您还想在视图中突出显示具有实际错误的某个城市。