javascript - 让 Redux Reducer 合并数组

问题描述

所以这里发生的是我正在尝试设置自动分页。我设置了一个 while 循环，当返回的数据中的数组项数大于 0 时发送 get 请求。每个循环将数据发送到我的减速器 AppendUserHistoryReducer，如下面的代码所示。

我想要发生的是，reducer 将它收到的每个数据循环附加到一个数组中。就目前而言，我只知道如何将每个数据循环存储在一个单独的数组中（如控制台图片所示）。我可以映射数据并在事后将它们合并在一起，但我只是想知道是否有更好的方法来做到这一点，所以不需要编写额外的代码。意思是，可以在reducer中完成吗？

为了清楚起见，我的目标是让 totalUserHistory 状态为 [0 - 729]，而不是分解成不同的数组，只需修改 reducer 中的代码即可。

我正在寻求帮助的代码：

export const AppendUserHistoryReducer = (userData=[], action) => {
  if (action.type === 'APPEND_USER_DATA') {
    return  [...userData.concat(action.payload)] 
  }
  return userData;
}

While 循环代码，仅用于上下文：

  // auto pagination
  while (this.props.userHistory.length > 0) {
    let { userHistory } = this.props
    let lastPage = userHistory[userHistory.length-1].data.name

    const response = await axios.get (`https://oauth.reddit.com/user/${userIdentityObject.data.name}/saved/.json?limit=100&after=${lastPage}`, {
    headers: { 'Authorization': `bearer ${token}` }
  })
    console.log('a loop');
    this.props.storeUserHistory(response.data.data.children)
    this.props.appendUserHistory(response.data.data.children)
  }
}

在控制台中生成多个数组：

标签： javascriptreactjsredux

根据屏幕截图，您有一个包含所有项目的数组。它只是 chrome 开发工具在视觉上分离了数组以方便调试。

为了确保只有一个数组，可以将其字符串化，然后打印到控制台：

console.log(JSON.stringify(totalUserHistory))

javascript - 让 Redux Reducer 合并数组

问题描述

解决方案

推荐阅读