Having issues with updating state of deeply nested arrays in Redux - reactjs

Question

I've got a state in redux that looks like this:
I'm trying to update the flags of "false" of selected arrays, but have trouble grasping such deeply nested array modification in redux.
Here was my take, that gives me syntax errors:
case 'SET_FLAG':{
return {
...state,
pickedSquares: [
...state.pickedSquares,
pickedSquares[action.index]: [
...state.pickedSquares[action.index],
]
]
}
}
And I probably still need to go 2 levels deeper.
I would appreciate the help.

Answer 1

I recommend making a copy of pickedSquares and then modifying the copy directly. Since pickedSquares is an array, and not a JS object, you won't be able to spread and overwrite values in the manner you are currently trying.
Here is an example of a way to solve the problem based on the code you have provided:
case 'SET_FLAG':
const pickedSquaresCopy = JSON.parse(JSON.stringify(state.pickedSquares)); //make a deep copy
pickedSquaresCopy[action.index] = action.newValue;
return {
...state,
pickedSquares: pickedSquaresCopy
}
What is shown is only a modification one level deep, but you can make them arbitrarily deep by navigating the array/object levels and modifying values that need to be modified.

Answer 2

Maybe not the best way but works:
case "SET_FLAG": {
const newArr = state[action.payload].map(el => {
if (el === false) {
return true;
}
return el;
});
const newState = state.map((el, index) => {
if (index === action.payload) {
return newArr;
}
return el;
});
return newState;
}
I don't know how performant this will be. Maybe you can try to make a deep copy as #Henry Wood suggested and find a way doing nested changes. But with my method, you are not mutating the state directly without doing a deep copy, too.
If you like the ternary operator:
case "SET_FLAG": {
const newArr = state[action.payload].map(el =>
el === false ? true : el
);
const newState = state.map((el, index) =>
index === action.payload ? newArr : el
);
return newState;
}