破坏 redux 减速器中的默认 state

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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);

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)

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

Answer 4

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