在 Redux reducer 中添加到无名数组答案

【问题标题】：Prepend to nameless array in Redux reducer在 Redux reducer 中添加到无名数组
【发布时间】：2018-03-31 20:27:24
【问题描述】：

我从 API 获取对象数组，并通过 Redux 将其存储在 articleData 属性中。 prop 是这样存储的：

在我的 reducer 中，我想在这个数组前面加上另一个 articleData 对象。我要添加的对象存储在action.articleData 中，但我找不到在不命名的情况下添加该数组的方法。这是我的减速器代码：

export function articleData(state = {}, action) {
    switch (action.type) {
        case 'ARTICLE_FETCH_DATA_SUCCESS':
            return action.articleData;

        //HERE IS THE PROBLEM!
        case 'ARTICLE_POST_NEW_ARTICLE_SUCCESS':
            return {arr:[action.articleData, ...state]} 

        default:
            return state;
    }
}

它成功地预置了新对象。 问题是：当我执行这段代码时，它会将状态从一个对象数组更改为一个名为“arr”的数组。见图：

我不知道如何在不命名对象的情况下添加到对象数组中。如果我从 reducer 代码中删除 arr: 会导致语法错误。

提前感谢任何愿意帮助我的人！ :)

【问题讨论】：

state.articleData 不应该存在吗？ return {...state, articleData: [action.articleData, ...state.articleData] }

标签： javascript json reactjs ecmascript-6 redux

【解决方案1】：

articleData reducer 的状态是一个数组。在 ARTICLE_POST_NEW_ARTICLE_SUCCESS 操作处理程序中，您创建一个新状态，它是一个对象，具有 arr 属性 - {arr:[action.articleData, ...state]}。

而是返回一个带有新articleData 的新数组，并将state 传播到其中：

    case 'ARTICLE_POST_NEW_ARTICLE_SUCCESS':
        return [action.articleData, ...state]

另外由于reducer的状态是一个数组，所以把初始状态改成一个空数组：

export function articleData(state = [], action) {

【讨论】：

状态是对象而不是数组
这个reducer的状态是一个数组。
我不这么认为：state = {} 是初始状态。
存储的顶层状态，通常是一个对象，但也可以是一个数组。这个 reducers 状态是他从 API 获得的 articleData 数组。更新时，他需要返回一个数组，而不是一个对象。
@BrettMerrifield - 不在减速机的减速中 - export function articleData(state = {}, action) { :)