CODEWITHSUNDEEP
angularrxjsngxs
Yousuf Jawwad
Yousuf Jawwad

Reputation: 3097

NGXS: ofActionSuccessful not being triggered however the action shows on Redux Devtools

I am following the caching example from docs. My Action first looks up the existing store, before fetching via http call. The ofActionSuccesful successfully triggers when I call http, but doesn't triggers when when returning from the store. Here is my store code

  @Action(Get)
  get(ctx: StateContext<SubmissionStateModel>, action: Get) {
    const id = action.payload;
    const submissions = ctx.getState().submissions;
    const index = submissions.findIndex(submission => parseInt(submission.id, 10) === parseInt(id, 10));

    return index > -1
      ? ctx.dispatch(new GetSuccess(submissions[index]))
      : this._submissionService.get(id).pipe(
          map(response => {
            ctx.patchState({ submissions: [response, ...submissions] });
            return ctx.dispatch(new GetSuccess(response));
          }),
        );
  }

and from my component

      this._actions
        .pipe(
          ofActionSuccessful(SubmissionActions.GetSuccess),
          takeUntil(this._onDestroy$),
        )
        .subscribe(action => {
          this._store.dispatch(new SubmissionActions.SetActive(action.payload.id));
          this.submissionEditForm.patchValue(action.payload);
        });

Upvotes: 3

Views: 1704

Answers (1)

Yousuf Jawwad
Yousuf Jawwad

Reputation: 3097

Quick update, I was able to solve this one. The actions subscriber need to be inside constructor. I was initialising it in ngOnInit. The final code looks like this

  constructor(
    private _actions: Actions,
  ) {
    this._actions
      .pipe(
        ofActionSuccessful(SubmissionActions.GetSuccess),
        takeUntil(this._onDestroy$),
      )
      .subscribe(action => {
        this._store.dispatch(new SubmissionActions.SetActive(action.payload.id));
        this.submissionEditForm.patchValue(action.payload);
      });
  }

Upvotes: 1

Related Questions