在Redux reducer中预置无名数组

时间:2017-10-19 17:50:50

标签: javascript json reactjs ecmascript-6 redux

我从API获取一组对象,并通过Redux将其存储在articleData道具中。道具的存储方式如下:

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

enter image description here

我无法弄清楚如何在不指定对象的情况下添加到对象数组中。如果我从reducer代码中删除arr:,则会导致语法错误。

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

1 个答案:

答案 0 :(得分: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) {