NGXS 选择器或选择器注释 return 是按值还是按引用传递？

Question

ngxs 传递对象的方式是什么？我有以下状态

@State<CounterStateModel>({
  name: 'counter',
  defaults: { count: 0, isLoading: true, tests: [{value: 0}] }
})

和选择器

@Selector() 
  static count(state: CounterStateModel) {
    return state.count;
  }

  @Selector() 
  static test(state: CounterStateModel) {
    return state.tests;
  }

我在 component.ts

中使用了这两个选择器

  @Select(CounterState.test) test$: Observable<TestModel[]>;
  @Select(CounterState.count) count$: Observable<number>;

然后在模板中我通过

显示值

<div class="count" *ngFor="let test of (test$ | async)">TEST: {{ test?.value }}</div>
<div class="count">COUNT: {{ (count$ | async) }}</div>

然后我通过订阅增加计数或值，直接加1

  incrementT() {
    this.test$.subscribe(test => test.map(t => t.value++))
  }

  incrementC() {
    this.count$.subscribe(count => count++)
  }

点击按钮后测试数组元素中的值增加，但计数保持不变。那么NGSX通过了什么？查看 stackblitz url:

https://stackblitz.com/edit/ng-ngxs-playground-pmekh1?file=src/app/counter/counter.component.ts

Answer 1

要改变状态中包含的值，您需要向状态发送一个操作，而不是修改您在订阅中收到的值。

NGXS 强制执行此规则以确保状态不可变，因此如果在堆栈闪电战中设置 developmentMode: true，当您尝试增加 'test' 值时，您将在控制台中看到 NGXS 错误。

要修改计数或测试项目，您需要向状态发送操作并让状态进行更新（从而将新值发送到您订阅的组件）。 NGXS documentation 中对此进行了概述。如果您不熟悉 NGXS（或 CQRS 模式），这是一种不同的思维方式。

NGXS 选择器或选择器注释 return 是按值还是按引用传递？

NGXS selector or Selector annotation return is passing by value or reference?

ngxs