Разрушение состояния по умолчанию в redux reducer

Как и React, Redux использует неизменяемость для эффективной проверки обновленных ссылок на объекты на предмет обновленного состояния, поэтому вам никогда не следует напрямую изменять / изменять состояние. В случае большинства редукторов по умолчанию никакие действия не изменили состояние, поэтому вы можете вернуть исходный объект состояния (return state), это безопасно, поскольку оно не было изменено.

Однако return { ...state } вернет идентичное состояние, но с другой ссылкой на объект верхнего уровня, что приведет к ненужным проверкам измененного состояния. Если вы вообще не изменяете состояние, вы всегда должны возвращать исходный объект (return state).

РЕДАКТИРОВАТЬ: добавлен следующий вопрос - если вы return { ...state } Redux будет транслировать обновленное состояние всем компонентам React, подключенным к магазину (будь то крючки или функция подключения), а затем React перейдет в обновление своего жизненного цикла. React на самом деле очень эффективен и использует мемоизацию и другие методы, чтобы остановить любые дорогостоящие повторные рендеринг или перерисовку / регенерацию DOM, поэтому разница между двумя с точки зрения процесса будет почти нулевой, это просто ненужно. Я не думаю, что у него даже будет возможность повторно запускать хуки как useEffect, он увидит избыточность, прежде чем добраться туда, или, по крайней мере, использовать кеш мемоизирования и не пересчитывать

Они оба одинаковы при установке состояния по умолчанию. return { ...state } будет иметь смысл, когда вы действительно измените состояние, например

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

Это обновит все состояние с новым объектом, который имеет обновленное свойство valueA и сохранит все остальные как существующие значения.

ES6 добавил свойство распространения к литералам объектов в javascript. Оператор распространения (…) с объектами используется для создания копий существующих объектов с новыми или обновленными значениями или для создания копии объекта с дополнительными свойствами.

Давайте рассмотрим пример того, как использовать оператор распространения для объекта,

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

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

Здесь мы выкладываем объект user1. Все пары "ключ-значение" объекта user1 копируются в объект clonedUser. Давайте посмотрим на другой пример слияния двух объектов с помощью оператора распространения,

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

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

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

mergedUsers является копией user1 и user2. Фактически, каждое перечислимое свойство объектов будет скопировано в mergedUsers объект. Оператор распространения - это просто сокращение для метода Object.assign(), но между ними есть некоторые различия.

Чтобы узнать больше, посетите Redux | Использование оператора распространения объектов

Когда вы используете return state, вы возвращаете переменную, это плохо, потому что, если эта переменная изменится, значение, возвращаемое в возврате, также изменится (это известно как побочный эффект).

С другой стороны, если вы используете return { ... state }, вы возвращаете копию значения переменной в этот момент.