mutability with nested objects with es6 and redux - react-native

Question

Wrong mutation of nested object, the uom_id gets [ null, null ] and it should always have a value.
case ADD_TO_CART:
console.log('ADD TO CART', {...(JSON.parse(JSON.stringify(payload.product)))})
const ex = state.shoppingCart[`c_${payload.product.default_code}`] ? {
...(JSON.parse(JSON.stringify(state.shoppingCart[`c_${payload.product.default_code}`]))),
quantity: state.shoppingCart[`c_${payload.product.default_code}`].quantity + 1,
uom_id: [ payload.product.uom_id[0], payload.product.uom_id[1]],
section: payload.section
} : {
...(JSON.parse(JSON.stringify(payload.product))),
section: payload.section,
uom_id: [ payload.product.uom_id[0], payload.product.uom_id[1]] ,
quantity: 1
};
console.log('THIS IS THE EX, ', ex);
return {
...state,
shoppingCart: {
...state.shoppingCart,
[`c_${payload.product.default_code}`]: state.shoppingCart[`c_${payload.product.default_code}`] ? {
...(JSON.parse(JSON.stringify(state.shoppingCart[`c_${payload.product.default_code}`]))),
quantity: state.shoppingCart[`c_${payload.product.default_code}`].quantity + 1,
uom_id: [ payload.product.uom_id[0], payload.product.uom_id[1]],
section: payload.section
} : {
...(JSON.parse(JSON.stringify(payload.product))),
section: payload.section,
uom_id: [ payload.product.uom_id[0], payload.product.uom_id[1]],
quantity: 1
},
}
}
I expect the object be copied with nested levels.
ct in the image you can see the first object as the payload and after the result of ex

Answer 1

I think your payload object has a product object within a product object.
As such:
{
payload : {
product : {
product : {
},
section: undefined
}
}
}
Therefore you would have to use payload.product.product.uom_id[0] to get your values.
Also, I recommend using deconstructing assignments for objects and arrays to help clean up the code structure. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Eg.
const { product: { product } } = payload
where this product variable would be the same as payload.product.product