CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxreducers
Paweł Baca
Paweł Baca

Reputation: 888

Destructing default state in redux reducer

What is the difference in returning state in default case in redux reducer between return state and return { ...state } ?

Upvotes: 4

Views: 1030

Answers (4)

James Morrison
James Morrison

Reputation: 2122

Like React, Redux uses immutability to efficiently check updated object references for updated state, which is why you should never modify/mutate state directly. In the default case of most reducers no actions have modified the state so you can return the original state object (return state), this is safe as it won't have been modified.

However, return { ...state } will return an identical state but with a different top level object reference which will cause unnecessary checks for changed state. If you're not modifying state at all you should always return the original object (return state).

EDIT: added on a follow up question - if you return { ...state } Redux would broadcast the updated state to all React components connected to the store (be it by hooks or the connect function) and then React would go into it's lifestyle cycle update. React is actually very efficient and uses memoizing and other methods to stop any expensive re-renders or repainting/regenerating the DOM so the difference between the 2 in terms of process will be next to nothing, it's just unnecessary. I don't think it'd even get to rerunning hooks suck as useEffect, it'd see the redundancy before getting there or at least use the memoize cache and not recalculate

Upvotes: 4

Proskynete
Proskynete

Reputation: 9

When you use return state you are returning the variable, this is bad because if that variable changes, the value delivered in the return will also change (this is known as a side effect).

On the other hand, if you use return { ... state } what you are returning is a copy of the value of the variable at that moment

Upvotes: -1

Rashed Rahat
Rashed Rahat

Reputation: 2475

ES6 has added spread property to object literals in javascript. The spread operator (…) with objects is used to create copies of existing objects with new or updated values or to make a copy of an object with more properties.

Let’s take at an example of how to use the spread operator on an object,

const user1 = {
    name: 'Jen',
    age: 22
};

const clonedUser = { ...user1 };
console.log(clonedUser);

Output

Here we are spreading the user1 object. All key-value pairs of the user1 object are copied into the clonedUser object. Let’s look on another example of merging two objects using the spread operator,

const user1 = {
    name: 'Jen',
    age: 22,
};

const user2 = {
    name: "Andrew",
    location: "Philadelphia"
};

const mergedUsers = {...user1, ...user2};
console.log(mergedUsers)

enter image description here

mergedUsers is a copy of user1 and user2. Actually, every enumerable property on the objects will be copied to mergedUsers object. The spread operator is just a shorthand for the Object.assign() method but, they are some differences between the two.

To know more, visit Redux | Using Object Spread Operator

Upvotes: 0

Amila Senadheera
Amila Senadheera

Reputation: 13245

They are both the same when setting the default state. return { ...state } will make sense when you actually change the state like

return {
    ...state, 
    valueA: "a"
}

This will update the whole state with the new object which has a updated property valueA and keping all others as existing values.

Upvotes: 0

Related Questions