如何在Redux中处理列表和单个元素的不同api

时间:2016-05-21 10:33:30

标签: javascript reactjs redux react-redux

大家好。

我有以下问题。 想象一下,我们有一个代表设备列表的应用程序 并且用户也可以访问单个设备的卡,并查看有关它的全部信息。

我们的api如下所示:

列表:

[ { name: 'Device 1', id: 1 }, { name: 'Device 2', id: 2 }, { name: 'Device 3', id: 3 }, { name: 'Device 4', id: 4 } ]

对于单个设备:

{ name: 'Device 1', id: '1', elements: [{ type: 'switch', name: 'socket' }, { type: 'multilevel', name: 'bulb' }], room: { name: 'living', id: 2 } }

如您所见,api的设备列表更轻巧。我们不想为列表提出更多数据库请求,也不希望强制用户获取列表中不必要的数据。

现在,想象一下,在设备卡用户可以编辑' name'例如,该设备。

我该如何处理我的州? 我应该把这个州存放在两个地方吗?

或者我应该以这种方式处理我的状态树: 应用程序获取列表和我标记为“完成:false'

的每个设备对象

{ '1': { id: 1, name: 'Device 1', complete: false }, '2': { id: 2, name: 'Device 2', complete: false } }

但是,当用户登录该卡时,我们会获取整个设备数据,然后使用我们的列表对象分配'完成'旗帜等于真实'。 并且两个地方处理状态的问题都消失了。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

我宁愿在商店中没有重复数据,因为这会导致所有常见问题(正如您已经提到的那样)。因此,我首选的模型将是第二个模型,其中包含所有列表条目的列表或地图。无论您选择列表还是地图,都取决于您拥有的要求,例如:固定顺序,这是地图无法轻易实现的。

我不会为完整性引入标志,而是让对象数据自行确定。在您的情况下,如果!entry.elements && !entry.room,则对象尚未完成,您需要获取其他数据并将其添加到对象。我没有标志,因为标志是冗余信息,再次可能不同步。