Redux 返回一个由我们现有状态组成的新对象

Question

我正在尝试学习 redux，偶然发现这篇文章来自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;
    }
}

对此给出了以下解释..

首先，我们在默认状态中添加了默认属性 posts 和 用 [] 初始化它。接下来，我们简单地添加了一个 switch-case 块 打开 action.type 。因为我们的行动有一种 Add_USER_POST 它将被我们减速器中的第一种情况拦截 switch-case 它将返回一个由我们组成的新对象 现有状态并将新添加的帖子添加到帖子数组中。

这里我无法理解以下几行（第一行和最后一行）

1. 首先，我们为默认状态添加了一个默认属性 posts 并使用 [] 对其进行初始化。

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 函数接受一个状态和一个动作参数。如果没有参数传递给 reducer，它只会返回一个包含空帖子数组的对象。

默认属性：

state = {posts: []}

设置一个默认对象作为reducer函数的第一个参数。

1. spread 运算符用于组合先前传递的状态、该状态数组中的先前帖子，并使用action.payload.content 中传递的内容添加新帖子。

文档

Default Parameters

Spread Operator