Redux 将 UI 属性添加到状态对象

Question

假设我的 redux 应用程序中有一个初始状态，如下所示：

{
    themeParks : []
}

主题公园对象存储在 MongoDB 或类似这样的任何地方：

{
    ParkName : "Disney World",
    NumberOfRides : 25
}

我的应用程序获取（通过 ajax）并在加载时显示主题公园，并允许我执行 CRUD 操作以添加/删除/编辑主题公园。

我的问题是，在应用程序中合并我需要的与 UI 更改相关并需要包含在状态中的新属性的最佳点是什么？例如，在某些时候我需要向每个主题公园添加一个 "editing" 布尔值属性，因此它们看起来像这样：

{
    ParkName : "Disney World",
    NumberOfRides : 25,
    editing : false
}

这个 "editing" 标志需要是每个主题公园对象的属性，以提供在使用应用程序时让多个主题公园处于可编辑状态的能力，对吗？显然我不想或不需要将此标志存储在我的数据库模式中，因为它仅与 UI 操作有关。

我的第一个猜测是在成功 return 数据后将这样的逻辑包含在我的 .then 函数中，就像这样，但我不确定：

let ajax = new AjaxHanlder();
let promise = ajax.DoGet('/path/to/api-endpoint');
promise.then((themeParks) => {
    themeParks.map((themePark, i) => {
        themePark.editing = false;
    });
    dispatch({type : LOAD_THEME_PARKS, payload : themeParks});
});

此外，由于初始状态是一个空数组并且不知道它，是否有在加载之前提供主题公园对象定义的约定？

在此先感谢您对此的任何见解，因为我试图提高我对 redux 设计模式的知识:-)

Answer 1

我建议将 editing 属性添加到 LOAD_THEME_PARKS reducer。例如，您的 LOAD_THEME_PARKS reducer 的一部分可能如下所示：

case LOAD_THEME_PARKS:
    return {
          ...state,
          themeParks: action.payload.map(park => park.editing = false)
    };

Redux 将 UI 属性添加到状态对象

Redux Adding UI properties to state object

redux

react-redux