如何在 Redux 中分离 UI 和应用程序状态答案

【问题标题】：How to separate UI and application state in Redux如何在 Redux 中分离 UI 和应用程序状态
【发布时间】：2016-02-06 23:28:13
【问题描述】：

在编写react-redux 应用程序时，我需要将应用程序和 UI 状态都保存在全局状态树中。设计其形状的最佳方法是什么？

假设我有一个待办事项列表：

{
  items: [
    { id: 1, text: 'Chew bubblegum' },
    { id: 2, text: 'Kick ass' }
  ]
}

现在我想让用户选择并展开项目。（至少）有两种选择如何对状态形状进行建模：

{
  items: [
    { id: 1, text: 'Chew bubblegum', selected: true, expanded: false },
    { id: 2, text: 'Kick ass', selected: false, expanded: false }
  ]
}

但这会将 UI 状态（selected 和 expanded）与应用程序状态混合在一起。当我将待办事项列表保存到服务器时，我只想保存应用程序状态，而不是 UI 状态（在实际应用中，UI 状态可以包含模式对话框的状态、错误消息、验证状态等）。

另一种方法是为项目的 UI 状态保留另一个数组：

{
  items: [
    { id: 1, text: 'Chew bubblegum' },
    { id: 2, text: 'Kick ass' }
  ],
  itemsState: [
    { selected: true, expanded: false },
    { selected: false, expanded: false }
  ]
}

然后你必须在渲染一个项目时结合这两种状态。我可以想象你可以zipconnect函数中的那两个数组来简化渲染：

const TodoItem = ([item, itemState]) => ...;
const TodoList = items => items.map(item => (<TodoItem item={item} />));

export default connect(state => _.zip(state.items, state.itemsState))(TodoList);

但是状态更新可能很痛苦，因为items 和itemsState 必须保持同步：

移除项目时，必须移除对应的 itemState。
重新排序项目时，itemsState 也必须重新排序。
当待办事项列表从服务器更新时，需要将 id 保持在 UI 状态并进行一些协调。

还有其他选择吗？或者是否有任何库可以帮助保持应用状态和 UI 状态同步？

【问题讨论】：

你找到解决方案/实现了吗？

标签： reactjs redux

【解决方案1】：

我目前正在自己寻找一个副项目。我将使用类似于上面 Rick 的方法来处理它。数据{}用作事实来源，您可以使用它来将本地 ui 更改推送到（反映最新状态）。您确实需要在渲染之前将数据和 ui 合并在一起，我自己已经在几个地方尝试过。我会说，就保持同步而言，它应该不会太糟糕。基本上，每当您保存/获取数据时，您都会更新数据并清除 ui{} 以准备下一个用例。{}

【讨论】：

【解决方案2】：

受normalizr启发的另一种方法：

{
    ids: [12,11], // registry and ordering
    data: {
        11: {text: 'Chew bubblegum'},
        12: {text: 'Kick ass'}
    },
    ui: {
        11: { selected: true, expanded: false },
        12: { selected: false, expanded: false }
    }
}

【讨论】：