React Reducer 正确返回带有状态的数组的方法答案

【问题标题】：React Reducer Correct Way To Return An Array With StateReact Reducer 正确返回带有状态的数组的方法
【发布时间】：2018-09-06 16:04:07
【问题描述】：

我在 action creator 和 redux-promise 中间件中使用 axios 来将对象数组返回到我组件的 render 方法中的 map 函数。当使用带有 ES6 扩展的第一个 return 语句时，我在一个数组中得到一个数组。我将如何正确地遍历这个数组？我会在减速器中使用地图吗？第二个返回语句有效。我不清楚为什么我不想自己返回数组。谢谢！！

const INITIAL_STATE = [];

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case GET_TICKET:
            return [action.payload.data, ...state];
            return action.payload.data;
        default:
            return state;
    }
}

【问题讨论】：

在这种情况下action.payload.data 是什么？它也是一个数组吗？如果是这样，您希望如何按顺序组合这两个数组？
是的，action.payload.data 是一个数组。我想返回网络请求加上空状态。当我执行 "[ ...state, action.payload.data ] 时，我得到一个带有数组的数组。我将如何以及在哪里迭代它？谢谢！
这会帮助你:) stackoverflow.com/questions/52036143/…

标签： javascript reactjs redux react-redux

【解决方案1】：

将两个数组合并为一个的主要方法有两种：

const newArray = [...firstArray, ...secondArray];
// or
const newArray = firstArray.concat(secondArray);

其中任何一个都适用于您的情况，例如：

return state.concat(action.payload.data);

【讨论】：

谢谢马克！...这更有意义。你能告诉我为什么可以使用 [...state, action.payload.data] 方法吗？
两者都是组合两个数组的有效方法。数组展开语法较新，是 ES6 语言规范的一部分。
了解数组组合。明白我们不应该改变状态。不明白为什么我会使用 return state.concat(action.payload.data); vs 返回 action.payload.data；如果我不合并数组，redux 在幕后用状态做了什么“魔法”？
这是两个不同的命令。 return action.payload.data only 返回操作中的数组。 return state.concat(action.payload.data) 返回一个新数组，其中包含旧数组的所有内容，加上 data 的内容。没有魔法 - 问题只是您是想用这个data 数组替换现有状态，还是添加 data 数组的内容到现有状态状态。
此外，Redux 中确实没有“魔法”。它是 your reducer 函数 - Redux 只是保存 your 代码返回的任何值。您可能想查看我的 Redux Fundamentals workshop 中的一些幻灯片，看看里面发生了什么（这很少 - 实际上只是 newState = rootReducer(oldState, action)）。

【解决方案2】：

你可以遵循这个格式

const INITIAL_STATE = { myData : [] };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case GET_TICKET:
            return {
               ...state, 
               myData: [...myData, ...action.payload.data]
            };
        default:
            return state;
    }
}

编辑

增强了此答案以说明 OP 的含义，取自已接受的答案：

[...firstArray, ...secondArray]

【讨论】：

在状态结构或返回值方面不是 OP 所寻找的。span>