在分页缩减器中附加数据 - reactjs

时间:2017-03-06 11:00:06

标签: reactjs redux react-redux

我只想问,为什么我的reducer继续覆盖我的嵌套数据,即使value是一个数组。基本上我在这里建立的就像一个分页。到目前为止,这是我的代码:

const INITIAL_STATE = {
    data: [],
    page: 1
};

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case GET_NEWS_SUCCESS: {
            return { 
                data : {
                    [action.payload.category]: [ action.payload.data ]
                },
                page: action.payload.page };
        }
    }

    return state;
}

下面的图片是我的reducer的返回数据,基本上是echelon array的下一个状态,0键应该仍然存在,并将附加另一组数据。但正如您在第二个红色矩形上看到的那样,它会覆盖先前的0键。

enter image description here

1 个答案:

答案 0 :(得分:2)

您可以在以下行中覆盖现有数组:

 data : {
     [action.payload.category]: [ action.payload.data ]
 },

您应该将新对象附加到现有数组。您可以使用扩展语法来实现它:

case GET_NEWS_SUCCESS: {
            if (!state.data[action.payload.category]) {
               state.data[action.payload.category] = [];
            }
            return { 
                data : {
                     [action.payload.category]: [ ...state.data[action.payload.category], action.payload.data ]
                },
                page: action.payload.page };
        }