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

Question

我只想问，为什么我的 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的return数据，基本上在下一个状态的echelon array上，0键应该还在，并且会追加另一组数据.但是正如您在第二个红色矩形上看到的那样，它覆盖了之前的 0 键。

Answer 1

您在这些行中覆盖了现有数组：

 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 };
        }

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

Appending data in a pagination reducer - reactjs

reactjs

redux

react-redux