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.