Using Redux, clone whole state or slice only? - redux

Question

Using Redux with state set as:
{
"a": {
"a2": {
"a3": 1
}
},
"b": {
"b2": {
"b3": 1
}
}
}
When I make an update in reducer only to b2, e.g. I add b3_1 as a sibling of b3, do I need to make a copy of the whole state?
{
"a": {
"a2": {
"a3": 1
}
},
"b": {
"b2": {
"b3": 1
}
}
}
Or only b2 and its children?
{
"b2": {
"b3": 1
}
}
And then make modifications finally ending up with:
{
"a": {
"a2": {
"a3": 1
}
},
"b": {
"b2": {
"b3": 1,
"b3_1":2
}
}
}
Would love to get some clarification on this as at Redux docs it says:
It's important to remember that whenever you update a nested value,
you must also return new copies of anything above it in your state
tree. If you have state.a.b.c.d, and you want to make an update to d,
you would also need to return new copies of c, b, a, and state. This
state tree mutation diagram demonstrates how a change deep in a tree
requires changes all the way up.
But then I stumbled upon this tweet:
https://twitter.com/dan_abramov/status/688087202312491008?lang=en
Which makes me think that b2 should be shallow cloned (so b3 would be same reference) and b3_1 should be added only. My best guess is that this is correct way to do it but I would appreciate any clarification on this.

Answer 1

b2 should be shallow cloned (so b3 would be same reference) and b3_1 should be added only.
This.
You must also remember that the original b should also remain unchanged so it must also be cloned as part of the update.
Using the object spread operator makes this very easy:
const initialState = {
a: {
a2: {
a3: 1
}
},
b: {
b2: {
b3: 1
}
}
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_B3_1:
return { ...state, b: { ...state.b, b2: { ...state.b.b2, b3_1: action.payload } } }
default:
return state
}
}
NOTE: It is generally advised to not have deeply nested structures in a single reducer. From the Redux docs:
... each layer of nesting makes this harder to read, and gives more chances to make mistakes. This is one of several reasons why you are encouraged to keep your state flattened, and compose reducers as much as possible.

Answer 2

Only b3_1 should be added only as well suggested from #Michael Peyper.
You should avoid using nested structures and instead you should consider using a Normalizing State Shape, where your data is flat and reference by ids.
To simplify your job with working with state and slicing only what you need you could consider dot-prop-immutable or immutable-js.