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;
    }
}

给出了以下解释。

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

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

首先，我们将默认属性发布添加到默认状态，并使用[]对其进行了初始化。
返回一个由我们现有状态组成的新鲜对象，并将新添加的帖子添加到posts数组中

有人可以帮助我以更简单的方式理解上述代码吗？

[更新] 第一点，有人可以向我解释与第二点相关的部分代码的工作

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

此reducer函数采用状态和操作参数。如果没有参数传递给化简器，则它仅返回一个包含空数组的对象。

默认属性：

state = {posts: []}

将默认对象设置为化简函数的第一个参数。

spread运算符用于合并之前传递的状态，该状态数组中的先前帖子，并添加一个新帖子以及在action.payload.content中传递的内容。

DOCS

Default Parameters

Spread Operator

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

1 个答案: