合并具有内部数组属性的两个对象,而不会改变react中的状态

Question

我有一个像这样的状态对象:

{
    news: {
        news: [
            {
                id: 1,
                name: 'test1'
            },
            {
                id: 2,
                name: 'test2'
            },
            {
                id: 3,
                name: 'test3'
            }
        ]
    }
    ]
}

现在,我正在制作一个Ajax请求并得到我的响应:

[
    {
        id: 4,
        name: 'test4'   
    },
    {
        id: 5,
        name: 'test5'   
    },
    {
        id: 6,
        name: 'test6'   
    }
]

我不想改变状态,所以在我的Reducer中,如何合并这两个值,以便最终输出如下:

{
    news: {
        news: [
            {
                id: 1,
                name: 'test1'
            },
            {
                id: 2,
                name: 'test2'
            },
            {
                id: 3,
                name: 'test3'
            },
            {
                id: 4,
                name: 'test4'   
            },
            {
                id: 5,
                name: 'test5'   
            },
            {
                id: 6,
                name: 'test6'   
            }
        ]
    }
    ]
}

我试过这样的事情,然而,它取代了整个新闻对象.

return { ...state, news: action.payload }

action.payload具有我在响应中获得的值.我知道我可能会遗漏一些简单明了的东西.

Answer 1

假设action.payload是newsajax返回的数组:

return { ...state, news: { news: [...state.news.news, ...action.payload] } }