javascript - 为什么计数器值只在第一次递增和递减？

Question

https://stackblitz.com/edit/angular-q8nsfz?file=src%2Fapp%2Fapp.component.ts

import {Component, OnInit} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from 'rxjs';

import * as fromApp from './app.store';
import {DecrementCounter, IncrementCounter} from './store/counter.action';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  c: Observable<object>;

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

  incrementCounter() {
     this.store.dispatch(new IncrementCounter());
  }

  decrementCounter() {
    this.store.dispatch(new DecrementCounter());
  }
  ngOnInit(){
    this.c =this.store.select('counterValue');

  }
}

嗨

你能告诉我为什么我的计数器值只在第一次递增和递减吗？我有两个按钮递增和递减按钮单击时计数器值发生变化。但是我的值仅第一次更改。它显示 0 初始值是正确的，但之后它不起作用，为什么？

Answer 1

每次调用函数时都非常简单:incrementCounter，您创建一个新类new IncrementCounter()。因此，每次调用此函数时，它都会执行相同的操作。

您需要做的是在组件的范围内创建这个新类:

private incrementClass = new IncrementCounter();
private decrementClass = new DecrementCounter();

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

  incrementCounter() {
     this.store.dispatch(this.incrementClass);
  }

  decrementCounter() {
    this.store.dispatch(this.decrementClass);
  }