1

I've recently learned React and Redux, and right when I thought I was getting the hang of it I've been hung up on this.

In my reducer I'm under the impression that the spread operator should create a new instance of the object at a difference memory location. However, using === to compare the objects returns true which I believe means the objects are the same instances.

const initState = {

    loadcases: {
        1: {
            isActive: false,
            profile: 'UB'
        },
        2: {
            isActive: true,
            profile: 'PFC'
        }
    }
}


const designInput = (state=initState, action={}) => {

    let newState = {...state}; //clone design input state
    console.log(newState.loadcases === state.loadcases)
    // Prints: TRUE ---- WHYYYYYYY????????????

    // goes on to modify newState before returning it. 
}

The redux logger is showing my previous state to already equal the new state which has me thinking that this here is interfering with the store directly. I've read through some redux docs and other posts which make me believe I have set everything else up correctly.

Any resources to educate me more on this issue is also much appreciated.

UPDATE:

Jayce's answer was exactly what was happening.

This SO post outlines which method for a deep clone will be suitable. For me, it's likely I'll want to store dates and other data so I've chosen to use lodash cloneDeep method.

So now: console.log(cloneDeep(state) === state.loadcases); // false

Steve
  • 4,372
  • 26
  • 37
  • 1
    Does this answer your question? [How to deep merge instead of shallow merge?](https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge) – Harald Gliebe Apr 01 '20 at 03:07

1 Answers1

1

Your assumption that the spread operator creates a new object is true, however it doesn't do a deep clone of objects. It copies the references of nested values over to the new object, so that's why it's printing that they're equal.

If you want to deeply clone something with nested values you can't use spread, you have to use another method. You could use a library like lodash, or something such as JSON.parse(JSON.stringify(obj)), there's multiple options just google for something like "Javascript deep clone object"

Jayce444
  • 8,725
  • 3
  • 27
  • 43
  • 1
    I'm almost certain this will be my issue cause my state goes even deeper than I have shown. I'll test it out when I get home and get back. Thanks! – Steve Apr 01 '20 at 03:14
  • @Steve remember this applies when spreading arrays too, so if it's an array of primitive values like strings then the new array's values will be completely separate, but if you spread an array of objects, then the new array will have all the same objects' references as the original, and changing one will change the other – Jayce444 Apr 01 '20 at 04:01
  • Thanks Jayce, this solved it! I do remember briefly covering it but i wish I understood the pain it would cause later by breezing over it! – Steve Apr 01 '20 at 04:26