Reducer: Add item in a nested array based in an index - react-redux

Question

I've a situation like this...
const INITIAL_STATE = {
chat: []
}
Then I set the chat and I include this data:
[
{
"otherParty":"aaaaa",
"thread":[
{
"a":1,
"b":2,
"c":3
},
{
"d":4,
"e":5,
"f":6
}
]
},
{
"otherParty":"bbbb",
"thread":[
{
"a":1,
"b":2,
"c":3
},
{
"d":4,
"e":5,
"f":6
}
]
},
{
"otherParty":"cccc",
"thread":[
{
"a":1,
"b":2,
"c":3
},
{
"d":4,
"e":5,
"f":6
}
]
}
]
I need to add a new item at array[1].thread something like { g: 7, h: 8, i: 9 } - In other words: I'd like to specify the index of the array and add a new thread.
How to archive this ?
export const addNewThread = (obj, index) => {
return {
type: ADD_NEW_THREAD,
payload: {
thread: obj,
index: index
}
}
}
and the reducer...(I need to fill the ????)
const INITIAL_STATE = {
chat: []
}
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case ADD_NEW_THREAD:
return {
...state,
chat: ?????
}
}
return state
}

Answer 1

Something like this
const INITIAL_STATE = {
chat: []
}
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case ADD_NEW_THREAD:
const chat = state.chat.slice();
const thread = chat[action.index].thread.concat(action.thread);
chat.splice(action.index, 1, thread);
return {
chat
};
}
return state
}