无法从 ngrx/store 取消订阅 ActionsSubject

Question

我用来ngrx/store实现登录操作，该操作从订阅商店获取日期。登录组件是一个模式，当我输入错误的密码时，我得到data.type === 'LOGIN_FAILED'，但是，当我关闭模式并重新打开它时，数据操作仍然是LOGIN_FAILED而不是INIT。因此，登录操作不是取消订阅，我尝试手动取消订阅，但不起作用。如何正确取消订阅登录操作？

import { Component, OnInit, ViewChildren, OnDestroy } from '@angular/core';

// shared
import { ToasterService } from '../../shared/providers/toaster-service/toaster.service';

// ngx-bootstrap
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

// ngrx
import { ActionsSubject } from '@ngrx/store';

// rxjs
import { Subscription } from 'rxjs/Subscription';

  loading = <boolean>false;
  actionSub = new Subscription();
  errorMessage = <string>'';

constructor(
    private actionsSubj: ActionsSubject,
    private toastService: ToasterService,
    private bsModalRef: BsModalRef,
  ) {
    this.actionSub = this.actionsSubj.subscribe((data: any) => {
      // listen to action of setting tokens successfully / failed
      console.log(data);
      if (data.type === 'LOGIN_FAILED') {
        if (data.payload.error.error.data.type === 'WrongCredentialsException') {
          // hide spinner for login button
          this.loading = false;
          this.errorMessage = 'Wrong Credentials';
        else {
          this.loading = false;
          this.toastService.showError('An error happened when trying to login. Please try again later.');
        }
      } else if (data.type === 'SET_TOKEN') {
        this.bsModalRef.hide();
      }
    });
  } 

  ngOnDestroy() {
    this.actionSub.unsubscribe();
  }

Answer 1

这是因为ActionsSubject它BehaviorSubject位于幕后，意味着它将存储最新的操作。

对于你的情况，你应该使用的ScannedActionsSubject是Subject引擎盖下的。

我还鼓励使用@ngrx/effects- https://blog.angularindepth.com/start-using-ngrx-effects-for-this-e0b2bd9da165处理您的表单