简单的减速器累加器不应该改变状态，为什么呢？

Question

出于某种原因，我的reducer只返回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];
      }, [])

在你的代码累加器中，值是一个带有类别道具的对象，它不断被数组中的另一个项覆盖，所以最后只有最后一项存在。

让我们放下反应和redux并专注于reduce功能。它需要一个数组并使用称为reducer的函数返回不同的东西。

在以下示例中：

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