时间戳

首页 > 解决方案 > ...state 究竟做了什么？

javascript - ...state 究竟做了什么？

问题描述

我正在 Angular 中尝试 NgRx (redux)，...state在下面的示例中，我无法完全理解。我搜索了它并通常将其理解为传播，但不确定为什么在reducer 的块Interface State中重复数据属性，因为 ... 无论如何都会传播它们？谁能帮我理解这一点？return{}switch

export interface State {
  sessionData: Map<string, string>;
  requesting: boolean;
  hasError: boolean;
  status: StatusModel;
}

export function sessionReducer(state: State = INITIAL_STATE, action: Session.Actions): State {
      switch (action.type) {
        case Session.REQUEST_SESSION_DATA:
          return {
            ...state,
            requesting: true,
            hasError: false,
            status: undefined,
          };
      }
}

PS：我已经查看了这里的线程，并且通常认为传播正是这样做的，传播了。但这里是在 Redux/NgRx 的上下文中，试图理解为什么return{}has...state和三个附加属性。

标签： javascriptangularngrx-store

解决方案

状态的要点是它是不可变的（返回一个新对象，而不是修改后的对象）。所以，如果你想修改状态添加新值，你需要返回当前状态加上你想添加到前一个状态的新值。在使用扩展运算符的示例中...，您将返回一个新的不可变对象，该对象包含先前的状态以及三个新属性requesting和。你可以考虑这样做：hasErrorstatus

export function sessionReducer(state: State = INITIAL_STATE, action: Session.Actions): State {
      switch (action.type) {
        case Session.REQUEST_SESSION_DATA:
          state.requesting = true;
          state.hasError: false;
          state.status: undefined;

          return state;
      }
}

但是你不能这样做，因为你打破了状态的哲学，新的不可变对象而不是修改过的对象:)

在您的示例中，我们需要知道它INITIAL_STATE是如何初始化的，但我认为它只包含sessionData属性。因此，在该示例中，您将返回sessionData加上剩余的属性。

在下面的链接中，您可以看到扩展运算符是 Redux 世界中常用的运算符，用于将当前状态作为新对象返回（它是 React 的 Redux 示例，但它在 Angular 中的工作方式完全相同）。

Redux在 Angular 中，使用带有更改检测策略的模式是一种非常常见的模式OnPush，因为您告诉 Angular 只检查组件中的参考更改，@Input而不是逐个比较对象的属性。这是性能上的一大优势。

在 Redux 中使用扩展运算符

推荐阅读