{... action.response} какая польза от этих 3 точек в реакции. js или избыточный

Question

какая польза от этих 3 точек в реакции. js или избыточный

const something = (state = initState, action) => {
      switch (action.type) {
        case something:
          return { ...action.response };
        default:
          return state;
      }
    };

Answer 1

Это особенность ES6, оператор стрелки распространения. Синтаксис расширения позволяет расширять выражение в местах, где ожидается несколько аргументов или несколько элементов.

let a = [1,2,3,4];
let b = [...a, 5,6,7];
console.log(b); //1,2,3,4,5,6,7

Answer 2

Он называется синтаксисом распространения и используется для создания поверхностной копии объекта или массива [... array]. Одним из основных применений в React является создание копии, чтобы вы не изменяли исходные данные при обновлении состояния:

[state, setState] = useState(...);
const tempState = {...state};
tempState.key = newValue;
setState(tempState);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Но будьте осторожны, поверхностное копирование означает, что только верхние ключи и значения действительно создаются новыми, вложенные ключи и значения ссылаются на исходный объект. Это может привести к ошибкам, поэтому для вложенных объектов и массивов предпочтительнее использовать библиотеку для глубокого клонирования, такую ​​как cloneDeep от Loda sh.

https://alligator.io/js/deep-cloning-javascript-objects/