为什么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();
  }

}

Priority Settings 是我店里的一个数组，包含 4 个字符串 'none', '低, 'medium', 'high'.

我正在我的商店订阅中复制数组并在组件中使用它。但是，如果我更新副本（优先级），则在不使用调度的情况下，商店会立即更新。

出于测试原因，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>

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

不中断的 this 方法示例如下

组件：

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

您的 priorities 现在将拥有一个包含所有相同内容的新数组。数组的内容仍将具有相同的引用，因此如果您在其中有一个对象并修改它，您仍然会修改商店中的对象。

为什么ngrx Store是通过改变组件内部的数组直接更新的？

Why is the ngrx Store is being directly updated by changing arrays inside components?

rxjs

ngrx

angular

ngrx-store

ngrx-store-4.0