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];
      }, [])

在代码累加器中，值是一个具有props类别的对象，该对象会不断被数组中的另一个项目覆盖，因此最后只显示最后一个项目。

让我们搁置react和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);

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

1 个答案: