Объединение двух объектов со свойствами внутреннего массива без изменения состояния в реакции

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'   
    }
]

Я не хочу видоизменятьсясостояние, поэтому в моем Редукторе, как мне объединить два значения так, чтобы конечный результат был таким:

{
    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

Это вспомогательная функция, которая сделает глубокий клон для вас независимо от структуры:

function deepClone(obj){
    return Object.keys(obj).reduce((objClone, key) => {
        let newValue;

        if(Array.isArray(obj[key]){
            newValue = obj[key].map(item => deepClone(item));
        }
        else if(obj[key] !== null && typeof obj[key] = 'object'){
            newValue = deepclone(obj[key]);
        }
        else{
            newvalue = obj[key];
        }

        return {...copyObj, [key]: newvalue};
    }, {});
}

Answer 2

Предполагая, action.payload это массив news, возвращаемый ajax:

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