How to access array of objects subelement from redux reducers - reactjs

Question

I have a response from an API like this one:
[{
"id": 1,
"name": "Microsoft",
"status": true,
"consoles": [{
"id": 4,
"name": "Xbox",
"status": true,
"subconsoles": [{
"id": 7,
"name": "Xbox 360",
"status": true,
"subconsoles": []
},
{
"id": 90,
"name": "Xbox One",
"status": false,
"subconsoles": [{
"id": 21,
"name": "Xbox One S",
"status": true,
"subconsoles": []
},
{
"id": 12,
"name": "Xbox One X",
"status": false,
"subconsoles": [{
"id": 41,
"name": "Xbox One X model 1",
"status": false,
"subconsoles": []
}]
}]
}]
}]
}]
Here is also the data in nice format:
What I am trying to achieve is to modify the status of the subconsoles.
So from layout section I pass the ID of what I want to change, but I am really stuck on how to access the subelement (and eventually the sub-subelement) in the reducers of Redux:
case SUBCONSOLES_ENABLE:
return {
...state,
id: action.payload.subconsoleId,
.....
}

Answer 1

You would need to create a copy of each of the arrays you have in your state before you can change them, to keep your state immutable. With so many levels, that would get complicated fast!
case SUBCONSOLES_ENABLE:
let newState = [...state]; //create copy of state array
..... //find the index of the object in the newState array which you would want to change
let newConsoles = [...newState[index].consoles]; //create a copy of consoles
..... //find the index of the object in the newConsoles array which you would want to change
let newSubConsoles = [...newConsoles[index2].subconsoles];//create a copy of subconsoles
let subConsole = newSubConsoles.find((a)=>a.id===action.payload.subconsoleId); //find the object in the newConsoles array which you would want to change
let newSubConsole = {...subConsole} //make a copy of your object
..... //make your changes to the copy
//replace the old object with the new object in newSubConsoles
//replace subConsoles array with newSubConsoles array in newConsoles
// replace consoles array with newConsoles array in new State.
//and finally!!
return newState;
Based on the shape of your state, I would suggest looking at normalizing your state and using Immutable.js

Answer 2

Check out the update fn from the 'immutability-helper' library, its recommended in the react docs themselves.