angular - 为什么 ngrx Store 是通过更改组件内的数组来直接更新的？

Question

我的问题如下，

我通过以下代码订阅我的商店

export class PrioritySelectComponent implements OnInit, OnDestroy {

  @Input('preset') preset: number; 

  prioritySettingSub: Subscription
  priorities: string[]

  selection: number;

  constructor(
    private store: Store<fromApp.AppState>
  ) { }

  ngOnInit(): void{
    this.prioritySettingSub = this.store.select('projectState').subscribe(data => {
      this.priorities = data.prioritySettings
    })
    if(this.preset !== undefined) {
      this.selection = this.preset
    }
  }

  arrayTest() {
    const potato = '4'
    let newArr = this.priorities
    newArr.push(potato);
  } // this updates the store immediately when run 


  ngOnDestroy(): void{
    this.prioritySettingSub.unsubscribe();
  }

}

优先级设置是一个数组，位于我的商店中，包含 4 个字符串 “无”、“低”、“中”、“高”。

我正在商店订阅内制作数组的副本，并在组件内使用它。但是，如果我更新副本(优先级)，而不使用调度，商店就会立即更新。

出于测试原因，arrayTest() 函数连接到 html 中的一个按钮，该按钮在单击事件时触发它。单击时，“4”会立即添加到存储数组中。

这是项目商店:

export interface ProjectState {
    projects?: Project[];
    prioritySettings: string[];
    addProjectError: boolean
}

const initialProjectState = {
  projects: [],
  prioritySettings: ['None', 'Low', 'Medium', 'High'],
  addProjectError: false
};

//reducer logic...

这是 html 模板

<mat-form-field>
  <mat-select placeholder="Priority" [(ngModel)]="selection">
    <mat-option *ngFor="let level of priorities, let i = index" [value]="i">{{level}}</mat-option>
  </mat-select>
</mat-form-field>

<button (click)='arrayTest()' >terst</button>

当我对对象、字符串或数字执行完全相同的操作时，不会发生这种情况

此方法不会中断的示例如下

组件:

export class TextInputComponent implements OnInit, OnDestroy {


  textsub: Subscription
  textValue: string;

  constructor(
    private store: Store.fromApp<AppState>;
  ) { }

  ngOnInit(): void {
    this.textsub = this.store.select('textinput').subscribe(data => {
      this.textValue = data.textValue
    })
    this.textValue = this.presetValue;
  }

  ngOnDestroy() {
    this.textsub.unsubscribe()
  }

  stringtest(){
    const potato = '4'
    let test = this.textValue
    test = potato;
  }

}

html:

<mat-form-field >
  <input matInput [(ngModel)]="textValue" name="textValue" >
</mat-form-field>

<button (click)='stringtest()' ></button>

当 stringtest() 被触发时，存储不会更新，除非设置了调度，否则不会更新。

这个数组问题发生在我的应用程序中的多个地方，我选择这个是因为它的简单性。在每种情况下，都是数组导致问题，为什么会出现这种情况以及如何修复此行为？

提前致谢!

Answer 1

如果您想复制数组而不是保留原始引用(这就是您遇到问题的原因)，您可以使用 slice() 来复制:

this.priorities = data.prioritySettings.slice(0);

您的优先级现在将拥有一个包含所有相同内容的新数组。不过，数组的内容仍将具有相同的引用，因此，如果您其中有一个对象并修改它，您仍然会修改存储中的对象。