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

当编写react-redux应用程序时，我需要将应用程序和UI状态保留在全局状态树中。设计其外形的最佳方法是什么？如何在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必须保持同步：

删除项目时，必须删除相应的itemState。
重新排序项目时，itemsState也必须重新排序。
当从服务器更新待办事项列表时，需要将ID保持在用户界面状态并进行一些调整。

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

来源

2015-11-05 dkl

您是否找到任何解决方案/实施？ –

另一种方法通过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 } 
    } 
}

来源

2015-11-06 02:38:29

我目前正在看这一个侧面项目自己。我将按照上面的Rick方法来处理它。数据{}充当真相的来源，并用它来推动本地UI变化（反映最新状态）。你需要在渲染之前将数据和ui合并在一起，而且我自己已经在几个地方尝试过了。我会说，就保持同步而言，它应该不会太坏。基本上，每当您保存/获取数据时，都会更新数据并清除ui {}以准备下一个用例。

来源

2017-02-02 16:59:20

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

回答

相关问题