# 深入理解 Angular @NGRX 中的三个点
Angular应用中，@ngrx是一个强大的状态管理库，它建立在RxJS的基础上，帮助我们更有效地管理和维护应用的状态。在@ngrx中，有一个常见的标记，即三个点(...)的使用。这三个点实际上代表了一种强大而灵活的模式，有助于简化代码并提高可维护性。在本文中，我们将深入探讨这三个点的含义，并通过案例代码演示它们的应用。## 1. 展开运算符三个点中的第一个点通常被称为“展开运算符”（spread operator）。在@ngrx中，展开运算符常用于创建新的状态对象，以确保我们在进行状态更新时不会修改原始状态。这对于保持状态的不可变性非常重要，因为它有助于避免潜在的副作用。考虑以下的例子，假设我们有一个简单的状态对象：typescriptconst initialState = { counter: 0, userName: 'Guest'};现在，我们想要增加计数器的值，而不改变原始状态。这时就可以使用展开运算符：typescriptconst newState = { ...initialState, counter: initialState.counter + 1 };通过这样的方式，我们创建了一个新的状态对象`newState`，它继承了原始状态的所有属性，并更新了计数器的值，而不会影响原始状态。## 2. 对象展开运算符展开运算符的第二个应用场景是在对象字面量中使用。这使得我们能够更灵活地组合和构建对象，特别是在处理@ngrx的动作（actions）时非常有用。考虑以下动作：typescriptconst increment = { type: 'INCREMENT' };const setUser = (userName: string) => ({ type: 'SET_USER', payload: { userName } });如果我们想要创建一个新的动作，结合上述两个动作的属性，可以使用对象展开运算符：typescriptconst combinedAction = { ...increment, ...setUser('John') };通过这种方式，我们得到了一个新的动作`combinedAction`，它继承了两个原始动作的属性。## 3. 数组展开运算符三个点中的第三个点，也是最后一个点，是数组展开运算符。它与对象展开运算符相似，但应用于数组。在@ngrx中，它通常用于处理状态中的数组。考虑一个包含待办事项的状态：typescriptconst initialState = { todos: ['Buy groceries', 'Pay bills']};如果我们想要添加一个新的待办事项，而不修改原始状态，可以使用数组展开运算符：typescriptconst newTodo = 'Go to the gym';const newState = { ...initialState, todos: [...initialState.todos, newTodo] };通过这种方式，我们创建了一个新的状态对象`newState`，其中包含了原始待办事项的所有内容，并添加了新的待办事项，同时保持了状态的不可变性。## 三个点的使用是@ngrx中的一种重要模式，它为我们提供了一种简洁而强大的方式来操作状态。展开运算符可以用于创建新的状态对象，以及在对象和数组中灵活地组合属性。通过合理利用这三个点，我们能够更好地管理Angular应用的状态，使其更具可维护性和可扩展性。