Angular 2 Ngrx 商店、效果和 "Ephemeral States"

Question

在表单组件的上下文中工作：

我正在尝试向用户显示表单的状态 "pending, success, error, pristine"。我不想在商店中保留这些状态 "ephemeral states"。

我有一个效果：

@Effect()
  addTagToVideoEffect_ = this.appState_
    .ofType(TagActions.ADD_TAG_TO_VIDEO)
    .map<AddTagToVideo>(action => action.payload)
    .switchMap((addTag: AddTagToVideo) => this.dtsiVideosService.addTagToVideo(addTag)
      .map((addTag: AddTagToVideo) => TagReducers.addTagToVideoComplete(addTag))
      .catch((err) =>Observable.throw(err))
    );

在我的表单组件中，我正在发送 TagActions.ADD_TAG_TO_VIDEO 并订阅它：

onTag(tag: TagEntity) {

    this.subscription = this.tagActions.addTagToVideoEffect_.subscribe(
      this.onAddTagSuccess,
      this.onAddTagError
    );

    this.tagActions.addTagToVideo({videoId: this.videoId, tag: tag});
}

.tagActions.addTagToVideoEffect_.subscribe 导致我的效果被调用两次。我们如何才能在不经过所有这些短暂状态的商店的情况下获得视图中的效果结果？而且没有调用两次的效果...

Answer 1

你两次调用 effect 的原因是它只是一个 Observable。你需要把它变成一个发布者。

@Effect()
  addTagToVideoEffect_ = this.appState_
    .ofType(TagActions.ADD_TAG_TO_VIDEO)
    .map<AddTagToVideo>(action => action.payload)
    .switchMap((addTag: AddTagToVideo) => this.dtsiVideosService.addTagToVideo(addTag)
      .map((addTag: AddTagToVideo) => TagReducers.addTagToVideoComplete(addTag))
      .catch((err) => Observable.throw(err))))
    .share();

然后您就可以在您的视图中使用它了：

tagFormState_: BehaviorSubject<FormState> = new BehaviorSubject<FormState>({});


  onTag(tag: TagEntity) {

  Observable.from(this.tagActions2.addTagToVideoEffect_)
  .first()
  .toPromise()
  .then(this.onAddTagSuccess, this.onAddTagError)

    this.tagFormState_.next({pending: true});
    this.tagActions.addTagToVideo({videoId: this.videoId, tag: tag});
  }


  onAddTagSuccess = (payload) => {
    this.tagFormState_.next({success: 'Success !'});
    this.resetTagFormState();
  }

  onAddTagError = (err) => {
    this.tagFormState_.next({error: err.message});
    this.resetTagFormState();
  }

  resetTagFormState() {
    setTimeout(_=> {
      this.tagFormState_.next({});
    }, 1000);
  }

帮助我解决这个问题的主题资源：

Angular 2 Ngrx 商店、效果和 "Ephemeral States"

Angular 2 Ngrx Store, Effects and "Ephemeral States"

ngrx

angular