Redux возвращает свежий объект, составленный из нашего существующего состояния

Question

Я пытаюсь выучить редукцию и наткнулся на эту статью из hackernoon

Все шло отлично, пока я не встретил этот пример

export default function reducer(state = {posts: []}, action) {
    switch (action.type) {
        case 'Add_USER_POST':
            return {
                ...state,
                posts: [
                    ...state.posts,
                    {
                        content: action.payload.content,
                    }
                ]
            };
        default:
            return state;
    }
}

Для которого было дано следующее объяснение ..

Сначала мы добавили сообщения о свойствах по умолчанию в наше состояние по умолчанию и инициализировал его с помощью []. Далее мы просто добавили блок переключателя который включает action.type. Потому что наши действия имели вид Add_USER_POST будет перехвачен первым случаем в нашем редукторе switch-case и он вернет свежий объект, составленный из нашего существующее состояние и добавьте недавно добавленную запись в массив записей.

Здесь я не могу понять следующие строки (первая и последняя строки)

1. Сначала мы добавили сообщения свойств по умолчанию в наше состояние по умолчанию и инициализировали его с помощью [].

2. вернуть свежий объект, составленный из нашего существующего состояния, и добавить недавно добавленную запись в массив записей

Может ли кто-нибудь помочь мне понять приведенный выше код в гораздо более простых терминах?

[Обновление] получил первый пункт, может кто-нибудь объяснить мне работу части кода, связанной со вторым пунктом

return {
                    ...state,
                    posts: [
                        ...state.posts,
                        {
                            content: action.payload.content,
                        }
                    ]
                };

Вещи, которые я понял из приведенного выше кода, мы возвращаем объект, который имеет наше текущее состояние, затем массив сообщений, который состоит из вещей внутри наших state.posts и action.payload.content, которые мы получаем отсюда

{
    type: 'Add_USER_POST',
    payload: {
        content: 'A quick brown fox jumped over the lazy dog',
    }
}

Как и в нашей статье.

Answer 1

1. Эта reducer функция принимает параметры состояния и действия. Если никакие параметры не передаются редуктору, он просто возвращает объект, содержащий пустой массив сообщений.

Свойство по умолчанию:

state = {posts: []}

Устанавливает объект по умолчанию в качестве первого параметра функции редуктора.

2. Оператор распространения используется для объединения предыдущего пройденного состояния, предыдущих сообщений в массиве этого состояния и добавления нового сообщения с содержимым, переданным в action.payload.content.

DOCS

Параметры по умолчанию

Оператор спреда