Redux update nested object
Question
I can't figure out how to update an array inside my object using a Redux reducer. I have been searching for quite a while, looked at the Redux docs, and the code I wrote looks like the ones I saw there, but it just doesn't work properly for some reason.
My state before the update looks like this:
{
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'
}
]
}
}
}
I'm trying to add a message to the messages array inside the currentGroup object.
I tried the following code for my reducer:
case ADD_CHAT_MESSAGE:
return {
...state,
currentGroup: {
...state.currentGroup,
messages: [...state.currentGroup.messages, action.payload]
}
};
When I run this, the contents of currentGroup get spread inside the messages object (along with the old messages array), then the new message gets added into that inner object's messages array like so:
{
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
}
]
}
}
}
Do you have any tips how to make this work? Thank you for your help!
1 answers
solution1
0 2020-10-09 01:34:29
I decided to refactor the state structure as advised by the comments. Thank you guys, Based on the reference I got. I have to normalize the data so that I can then manipulate it easily without having to deal with nested objects.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Update nested object in Redux reducer
Update nested object within Redux store
Javascript Redux update nested object property value
Update nested data arrays of object (Redux)
Update value of nested Redux reducer object
REACT REDUX: Update value in deep nested object
Update nested object in array in a redux store
How to update nested object property in Redux + React?
Update Nested Object in Array in React Using Redux
how to update a nested object which have made up by EntityAdapter redux?
Related Tags