什么是 Rest/Spread 属性
在 ES9 中，Rest/Spread 属性是指三个小点 ...(spread operator) 和函数参数定义中的 three dots ...(rest parameter)，它们可以在对象字面量、数组字面量和函数参数中使用，用于将集合拆分成更小的部分。
Rest/Spread 属性主要有以下两个用途：
Spread Operator（扩展运算符）：将数组或对象展开成一个列表形式，使其可以方便地传递给函数或添加到另一个集合中。
Rest Parameter（剩余参数）：在函数定义时，使用 rest 参数可以捕获未命名的参数，并将其转换为具有 Array 类型的数组，使其可以更方便地操作。
Redux 简介
Redux 是一个 JavaScript 应用程序状态容器，它主要用于管理 React 应用程序的状态，但也可以在任何其他应用程序中使用。它由三个主要组件组成：Actions、Reducers 和 Store。
Actions：是发生在应用程序中的一些事件，如用户点击按钮或从服务器收到响应。这些事件被称为动作，并包含一个对象，描述操作和相关数据。
Reducers：是一个纯函数，它负责处理动作。Reducers 接收旧状态和新动作，并返回一个新状态。
Store：是应用程序状态的单一源，用于存储状态数据并执行状态更改的操作。
如何在 Redux 中使用 Rest/Spread 属性
Rest/Spread 属性可以帮助我们更轻松地更新 Redux 的状态，具体可以通过以下几个步骤实现：
1. 使用 Spread Operator 扩展对象
使用 Spread Operator 可以方便地将对象合并到一个新的对象中。在 Redux 中，我们通常会使用 combineReducers() 函数将多个 reducer 合并为一个 reducer，下面是一个示例：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------------------- -
---- --------------
------ - --------- ----------------- -
--------
------ -----
-
-
----- ------------------- - ------ - --- ------- -- -
------------------- -
---- ----------------------
------ - --------- ----------------- -
--------
------ -----
-
-
----- ----------- - -----------------
----- ------------
------------- -------------------
--在上面的代码中，{ ...state, ...action.payload } 表示使用 Spread Operator 将原状态 state 和新的数据 action.payload 合并为一个新的状态，这个新的状态将成为 reducer 返回的新状态。
2. 使用 Rest Parameter 规范 Action 参数
在传递 action 参数时，我们可以使用 Rest Parameter 将参数打包为一个数组，这样可以使代码更加规范化，便于维护。下面是一个示例：
-- -------------------- ---- ------- ----- ---------- - -- ----- ---- ------ -- -- -- ----- -------------- -------- - ----- ---- ------ - -- ----- ------------------ - -- -------- ---- -- -- -- ----- ---------------------- -------- - -------- ---- - --
在上面的代码中，使用 Rest Parameter 将参数打包为一个对象，并将其作为 payload 返回到 reducer 中。
3. 使用 Spread Operator 和 Rest Parameter 配合使用
在 Redux 的状态管理中，我们经常会遇到需要对某个对象中的属性进行更新的情况，此时可以使用 Spread Operator 扩展整个对象，并使用 Rest Parameter 仅更新需要更改的属性。下面是一个示例：
-- -------------------- ---- -------
----- ------------ - -
----- -
----- ------
---- ---
------- ------
--
------------- -
-------- ---
----- --
-
-
----- ----------- - ------ - ------------- ------- -- -
------------------- -
---- --------------
------ - --------- ----- - -------------- ----------------- - -
---- ----------------------
------ - --------- ------------- - ---------------------- ----------------- - -
--------
------ -----
-
-在上面的代码中，{ ...state, user: { ...state.user, ...action.payload } } 表示使用 Spread Operator 扩展原状态 state，并仅更新 user 对象中需要更改的属性。
总结
Rest/Spread 属性是非常有用的语言特性，可以帮助我们更轻松地编写 Redux 应用程序。通过使用 Spread Operator 将对象合并到一个新的对象中，使用 Rest Parameter 规范化参数传递，并通过使用 Spread Operator 和 Rest Parameter 配合使用更新对象属性，我们可以在 Redux 中编写更干净，更简洁的代码。
示例代码
-- -------------------- ---- -------
------ - --------------- - ---- -------
----- ----------- - ------ - --- ------- -- -
------------------- -
---- --------------
------ - --------- ----------------- -
--------
------ -----
-
-
----- ------------------- - ------ - --- ------- -- -
------------------- -
---- ----------------------
------ - --------- ----------------- -
--------
------ -----
-
-
----- ----------- - -----------------
----- ------------
------------- -------------------
--
----- ---------- - -- ----- ---- ------ -- -- --
----- --------------
-------- - ----- ---- ------ -
--
----- ------------------ - -- -------- ---- -- -- --
----- ----------------------
-------- - -------- ---- -
--
----- ------------ - -
----- -
----- ------
---- ---
------- ------
--
------------- -
-------- ---
----- --
-
-
----- ----- - ------------------------ -------------
--------------------------- ----- ------- ---
----------------------------------- -------- ------ -------- ----- ------- ---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0cb1283d39b48815241bb