无法从ngrx/store取消订阅ActionsSubject [英] cannot unsubscribe ActionsSubject from ngrx/store

问题描述

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

I use ngrx/store to implement login actions which gets date from subscribe to a store. The login component is a modal, when I type a wrong password, I get data.type === 'LOGIN_FAILED', however, when I close the modal and re-open it, the data action is still LOGIN_FAILED instead of INIT. Therefore, the login actions are not unsubscribe, I tried to manually unsubscribe the subscription, but it does not work. How can I unsubscribe the login actions properly?

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

推荐答案

这是因为 ActionsSubject 是引擎盖下的 BehaviorSubject ，这意味着它将存储最新的动作.

This is because ActionsSubject is a BehaviorSubject under the hood, meaning it will store the latest action.

对于您的情况，您应该使用 ScannedActionsSubject ，它是引擎盖下的 Subject .

For your case you should be using ScannedActionsSubject which is a Subject under the hood.

我也鼓励您使用 @ ngrx/effects - 查看全文