Как запушить в свойство стейта?

Question

[zlodiak]

Я написал форму, которая отправляет в глобальный стейт своё содержимое. Редюсер выглядит так:

const messagesReducer = function messagesReducer(state = { messages: [] }, action) {
    switch(action.type) {
        case 'SET_MESSAGE': {
            // state = {
            //     ...state,
            //     messages: state.messages.push(action.payload),
            // };
            state.messages.push(action.payload);
            break;
        }
        default:
            return state;
    }
    return state;
}

Он срабатывает без проблем. Проблемы начинаются когда я пытаюсь пуш при помощи spread-оператора. Для этого в коде выше я убираю комметарии с нескольких строк кода. В этом случае я получаю такое сообщение об ошибке:

Uncaught TypeError: state.messages.push is not a function

Подскажите пожалуйста как всё таки заполнить стейт при помощи spread-оператора.

LIVE DEMO здесь.

Структура стейта такая:

Comments

[G F]

Погугли redux toolkit, и оставь эти уродливые редьюсеры легаси проектам

[G F]

Заодно не придется обмазываться спредами

[WbICHA]

state = {
  ...state,
  messages: state.messages.push(action.payload),
};

Прочтите, ЧТО возвращает метод пуш: https://developer.mozilla.org/ru/docs/Web/JavaScri...
Далее, надеюсь, понятно почему после первого срабатыванию идут ошибки.

Answer 1

[0xD34F]

case 'SET_MESSAGE':
  return {
    ...state,
    messages: [ ...state.messages, action.payload ],
  };