javascript - 在 Redux reducer 中添加到无名数组之前

Question

我从 API 获取对象数组，并通过 Redux 将其存储在 articleData 属性中。 prop 的存储方式如下:

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

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”的数组。参见图片:

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

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

Answer 1

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

而是返回一个包含新 articleData 的新数组，并将 state 传播到其中:

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

另外由于reducer的状态是数组，所以将初始状态改为空数组:

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