如何在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状态(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 }
  ]
}

然后,在渲染项目时必须将这两种状态组合在一起.我可以想象你可以zip在connect函数中使用这两个数组来简化渲染:

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