reactjs - 如何在 Redux 中分离 UI 和应用程序状态

Question

在编写 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 状态(选定 和 展开)与应用程序状态混合在一起。当我将待办事项列表保存到服务器时，我只想保存应用程序状态，而不是 UI 状态(在实际应用程序中，UI 状态可以包含模式对话框的状态、错误消息、验证状态等)。

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

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

然后您必须在渲染项目时结合这两种状态。我可以想象您可以在 connect 函数中zip这两个数组以使渲染变得容易:

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 必须保持同步:

1. 删除项目时，必须删除相应的 itemState。
2. 重新排序项目时，itemsState 也必须重新排序。
3. 当从服务器更新待办事项列表时，有必要将 ID 保持在 UI 状态并进行一些协调。

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

Answer 1

受 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 }
    }
}