Redux 更新嵌套 object
[英]Redux update nested object
问题描述
我不知道如何使用 Redux reducer 更新我的 object 中的数组。 我已经搜索了很长时间，查看了 Redux 文档，我写的代码看起来和我在那里看到的一样，但由于某种原因它不能正常工作。
更新前我的 state 是这样的：
{
groups: {
groups: [
{
_id: '5f7f5a3097d3b6a8e49086a5',
name: 'asd3',
avatar_color: '#ffffff',
avatar_bgcolor: '#000000'
},
{
_id: '5f7f5a4397d3b6a8e49086a6',
name: 'asd fgh',
avatar_color: '#000000',
avatar_bgcolor: '#ffffff'
}
],
currentGroup: {
_id: '5f7f5a3097d3b6a8e49086a5',
messageCount: 10,
messages: [
{
_id: '5f7f99b262657b148406cad5',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 0',
createdAt: '2020-10-08T22:58:58.181Z',
updatedAt: '2020-10-08T22:58:58.181Z'
},
{
_id: '5f7f99b462657b148406cad6',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 1',
createdAt: '2020-10-08T22:59:00.902Z',
updatedAt: '2020-10-08T22:59:00.902Z'
},
{
_id: '5f7f99b662657b148406cad7',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 2',
createdAt: '2020-10-08T22:59:02.731Z',
updatedAt: '2020-10-08T22:59:02.731Z'
},
{
_id: '5f7f99b862657b148406cad8',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 3',
createdAt: '2020-10-08T22:59:04.360Z',
updatedAt: '2020-10-08T22:59:04.360Z'
},
{
_id: '5f7f99ba62657b148406cad9',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 4',
createdAt: '2020-10-08T22:59:06.052Z',
updatedAt: '2020-10-08T22:59:06.052Z'
},
{
_id: '5f7f99bb62657b148406cada',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 5',
createdAt: '2020-10-08T22:59:07.870Z',
updatedAt: '2020-10-08T22:59:07.870Z'
},
{
_id: '5f7fa6090c7e871c1f1d400d',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 6',
createdAt: '2020-10-08T23:51:37.772Z',
updatedAt: '2020-10-08T23:51:37.772Z'
},
{
_id: '5f7fabf00c7e871c1f1d400f',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 7',
createdAt: '2020-10-09T00:16:48.795Z',
updatedAt: '2020-10-09T00:16:48.795Z'
},
{
_id: '5f7faee20c7e871c1f1d4010',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 8',
createdAt: '2020-10-09T00:29:22.360Z',
updatedAt: '2020-10-09T00:29:22.360Z'
},
{
_id: '5f7faf8f0c7e871c1f1d4011',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 9',
createdAt: '2020-10-09T00:32:15.747Z',
updatedAt: '2020-10-09T00:32:15.747Z'
}
]
}
}
}
我正在尝试向 currentGroup object 内的消息数组添加一条消息。
我为我的减速器尝试了以下代码：
case ADD_CHAT_MESSAGE:
return {
...state,
currentGroup: {
...state.currentGroup,
messages: [...state.currentGroup.messages, action.payload]
}
};
当我运行它时，currentGroup 的内容散布在消息 object 中（连同旧消息数组），然后新消息被添加到该内部对象的消息数组中，如下所示：
{
groups: {
groups: [
{
_id: '5f7f5a3097d3b6a8e49086a5',
name: 'asd3',
avatar_color: '#ffffff',
avatar_bgcolor: '#000000'
},
{
_id: '5f7f5a4397d3b6a8e49086a6',
name: 'asd fgh',
avatar_color: '#000000',
avatar_bgcolor: '#ffffff'
}
],
currentGroup: {
_id: '5f7f5a3097d3b6a8e49086a5',
messageCount: 10,
messages: [
{
_id: '5f7f99b262657b148406cad5',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 0',
createdAt: '2020-10-08T22:58:58.181Z',
updatedAt: '2020-10-08T22:58:58.181Z'
},
{
_id: '5f7f99b462657b148406cad6',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 1',
createdAt: '2020-10-08T22:59:00.902Z',
updatedAt: '2020-10-08T22:59:00.902Z'
},
{
_id: '5f7f99b662657b148406cad7',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 2',
createdAt: '2020-10-08T22:59:02.731Z',
updatedAt: '2020-10-08T22:59:02.731Z'
},
{
_id: '5f7f99b862657b148406cad8',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 3',
createdAt: '2020-10-08T22:59:04.360Z',
updatedAt: '2020-10-08T22:59:04.360Z'
},
{
_id: '5f7f99ba62657b148406cad9',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 4',
createdAt: '2020-10-08T22:59:06.052Z',
updatedAt: '2020-10-08T22:59:06.052Z'
},
{
_id: '5f7f99bb62657b148406cada',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 5',
createdAt: '2020-10-08T22:59:07.870Z',
updatedAt: '2020-10-08T22:59:07.870Z'
},
{
_id: '5f7fa6090c7e871c1f1d400d',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 6',
createdAt: '2020-10-08T23:51:37.772Z',
updatedAt: '2020-10-08T23:51:37.772Z'
},
{
_id: '5f7fabf00c7e871c1f1d400f',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 7',
createdAt: '2020-10-09T00:16:48.795Z',
updatedAt: '2020-10-09T00:16:48.795Z'
},
{
_id: '5f7faee20c7e871c1f1d4010',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 8',
createdAt: '2020-10-09T00:29:22.360Z',
updatedAt: '2020-10-09T00:29:22.360Z'
},
{
_id: '5f7faf8f0c7e871c1f1d4011',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 9',
createdAt: '2020-10-09T00:32:15.747Z',
updatedAt: '2020-10-09T00:32:15.747Z'
},
{
members: [
'5f699fffc51562181fe52879'
],
_id: '5f7f5a3097d3b6a8e49086a5',
name: 'asd3',
avatar_color: '#ffffff',
avatar_bgcolor: '#000000',
messages: [
{
_id: '5f7f99b262657b148406cad5',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 0',
createdAt: '2020-10-08T22:58:58.181Z',
updatedAt: '2020-10-08T22:58:58.181Z'
},
{
_id: '5f7f99b462657b148406cad6',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 1',
createdAt: '2020-10-08T22:59:00.902Z',
updatedAt: '2020-10-08T22:59:00.902Z'
},
{
_id: '5f7f99b662657b148406cad7',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 2',
createdAt: '2020-10-08T22:59:02.731Z',
updatedAt: '2020-10-08T22:59:02.731Z'
},
{
_id: '5f7f99b862657b148406cad8',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 3',
createdAt: '2020-10-08T22:59:04.360Z',
updatedAt: '2020-10-08T22:59:04.360Z'
},
{
_id: '5f7f99ba62657b148406cad9',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 4',
createdAt: '2020-10-08T22:59:06.052Z',
updatedAt: '2020-10-08T22:59:06.052Z'
},
{
_id: '5f7f99bb62657b148406cada',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 5',
createdAt: '2020-10-08T22:59:07.870Z',
updatedAt: '2020-10-08T22:59:07.870Z'
},
{
_id: '5f7fa6090c7e871c1f1d400d',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 6',
createdAt: '2020-10-08T23:51:37.772Z',
updatedAt: '2020-10-08T23:51:37.772Z'
},
{
_id: '5f7fabf00c7e871c1f1d400f',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 7',
createdAt: '2020-10-09T00:16:48.795Z',
updatedAt: '2020-10-09T00:16:48.795Z'
},
{
_id: '5f7faee20c7e871c1f1d4010',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 8',
createdAt: '2020-10-09T00:29:22.360Z',
updatedAt: '2020-10-09T00:29:22.360Z'
},
{
_id: '5f7faf8f0c7e871c1f1d4011',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 9',
createdAt: '2020-10-09T00:32:15.747Z',
updatedAt: '2020-10-09T00:32:15.747Z'
},
{
_id: '5f7fb03a0c7e871c1f1d4012',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 10',
createdAt: '2020-10-09T00:35:06.025Z',
updatedAt: '2020-10-09T00:35:06.025Z'
},
{
_id: '5f7fb15c0c7e871c1f1d4014',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 10',
createdAt: '2020-10-09T00:39:56.477Z',
updatedAt: '2020-10-09T00:39:56.477Z'
},
{
_id: '5f7fb76e0c7e871c1f1d401c',
sender: '5f699fffc51562181fe52879',
type: 'text',
message: 'test message 10',
createdAt: '2020-10-09T01:05:50.511Z',
updatedAt: '2020-10-09T01:05:50.511Z'
}
],
createdAt: '2020-10-08T18:28:00.475Z',
updatedAt: '2020-10-09T01:05:50.511Z',
__v: 13
}
]
}
}
}
您有任何提示如何使这项工作吗？ 谢谢您的帮助！
1 个解决方案
解决方案1
0 2020-10-09 01:34:29
我决定按照评论的建议重构 state 结构。 谢谢大家，根据我得到的参考。 我必须规范化数据，这样我就可以轻松地操作它而不必处理嵌套对象。
如何更新由 EntityAdapter redux 组成的嵌套对象？
[英]how to update a nested object which have made up by EntityAdapter redux?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.