Простой редуктор аккумулятора не должен мутировать состояние, почему так?

Question

По какой-то причине мой редуктор возвращает только один элемент в коллекции categories.

Я просто изучаю эту логику накопителя, поэтому я оставил ее простой, которая, как мне казалось, должна была просто возвращать то же самое состояние, с которого я начал.

Мое состояние в JSON выглядит следующим образом:

{     
 "account":{  
    "id":7,    
    "categories":[  
       {  
          "id":7,          
          "products":[  
             {                  
                "productId":54                
             }
          ]
       },
       {  
          "id":9,          
          "products":[  
             {                  
                "productId":89                
             }
          ]
       }
    ]
 }
}

В моем редукторе у меня есть следующее:

return {
  ...state,
  account: {
      ...state.account,
      categories: [state.account.categories.reduce((acc, cat) => {
        return {...acc, ...cat}
      }, {})]
    }
  };

Когда я вывожу свое состояние, я вижу, что по какой-то причине оно удалило одну из categories из коллекции.

Почему мое состояние не такое же, так как аккумулятор ничего не фильтрует? Это должно быть точно так же, как и началось.

Answer 1

если вы хотите вернуть категории без изменений (но с другой ссылкой), вы должны сделать это следующим образом:

categories: state.account.categories.reduce((acc, cat) => {
        return [...acc, cat];
      }, [])

В вашем коде значение аккумулятора - это объект с реквизитами категорий, который постоянно перезаписывается другим элементом из массива, поэтому в итоге присутствует только последний элемент.

Давайте отложим реакцию и избыточность и сосредоточимся на функции reduce. Он принимает массив и возвращает что-то другое, используя функцию, называемую редуктором.

В следующем примере:

const array = [{num: 1}, {num: 2}];

вы можете взять каждый из элементов массива и объединить их свойства:

array.reduce((acc, item) => ({...acc, ...item}), {})

это равно

Object.assign({}, array[0], array[1]);

или

{...array[0], ...array[1]}

, и результат равен {num: 2}, (сначала был пустой объект {}, затем {num: 1} и наконец {...{num: 1}, ...{num: 2}} дал {num: 2}

Неважно, если вы заключите его в массив, это все равно один объект, созданный путем объединения всех объектов в массиве

Если вам нужна копия массива. Это можно сделать так:

array.reduce((acc, item) => [...acc, item], []);

Это равно

[].concat(...array);