How to extract return value from store dispatch RxJs

Question

Long story short I'm junior .Net developer and I recived task to change something in our Angular app, I have no idea how it works and I'm struggling to change it. I'm stuck on one topic.

User is created based on the form, after submiting it there is a call:

submit() {
    if (this.accountForm.invalid) {
      return;
    }
    const {
      email,
      accountExpirationDate,
      firstName,
      lastName,
      permissionLevel,
      timezone,
      language,
    } = this.accountForm.value;

    const accountExpirationDateMs = new Date(accountExpirationDate || null).getTime();

    const result = {
      email,
      accountExpirationDate: accountExpirationDateMs || null,
      name: firstName,
      lastName,
      roleExternalIds: [permissionLevel],
      timezone,
      languageExternalId: language,
      avatar: this.avatar
    };

    if (!this.id) {
      this.store.dispatch(fromUser.createUserAction({ result } as any));
    } else {
      this.isPending = true;
      this.store.dispatch(fromUser.editUserAction({ result, id: this.id } as any));
      setTimeout(() => {
        this.store.dispatch(fromSettings.getCurrentUserInfoAction());
      }, 1200);
    }
  }

After the this.store.dispatch(fromUser.createUserAction({ result } as any)); in the if statement I have to make two more calls which requires me to provide userId which is returned by the backend after the user creation, but I have no idea how to extract it from this call.

Create user action looks like this:

export const createUserAction = createAction('[User management] Create User', props<{result: UserRegistrationRequestModel}>());

And it's making this call I belive:

  createUser$ = createEffect(() =>
    this.actions$.pipe(
      ofType(fromUserManagement.createUserAction),
      mergeMap((action) => {
        return this.identityServiceClient.create(action.result).pipe(
          map(response => {
            this.messageService.open('User has been created!', 'success');
            this.router.navigateByUrl('/app/users/list');
            return fromUserManagement.createUserActionSuccess(response)
          }),
          catchError(() => {
            this.messageService.open('Something went wrong!', 'danger');
            return fromUserManagement.createUserActionError;
          })
        );
      })
    )
  )

It might be stupid question with not enough information, but I'm using angular first time in my life so honestly I have no idea how it works :D

Amer Amer · Accepted Answer · 2021-09-02T13:45:11

You can dispatch a new action from your createUser$ effect to handle the extra work, and pass the parameters you need within. Then you can create a new effect to handle the new dispatched action and call whatever you want within.

Or if you want to handle it within the same effect after receiving the result from the identityServiceClient.create function, you can try something like the following:

createUser$ = createEffect(() =>
    this.actions$.pipe(
        ofType(fromUserManagement.createUserAction),
        mergeMap((action) => {
            return this.identityServiceClient.create(action.result).pipe(
                map((response) => {
                    this.messageService.open('User has been created!', 'success');
                    this.router.navigateByUrl('/app/users/list');
                }),
                switchMap((response) =>
                    // Call here all the extra requests (request1$, request2$) depending on the response,
                    // and the `forkJoin` will emit the value once all the request have been completed
                    forkJoin({ response1: request1$, response2: request2$ }).pipe(
                        // if you want to do extra work with the results that come from request1$ & request2$ you can do it here using `tap` operator
                        tap(({ response1, response2 }) => console.log(response1, response2)),
                        // and after that you need to return back the action you want to dispatch which is `createUserActionSuccess` in your case
                        map(() => fromUserManagement.createUserActionSuccess(response))
                    )
                ),
                catchError(() => {
                    this.messageService.open('Something went wrong!', 'danger');
                    return fromUserManagement.createUserActionError;
                })
            );
        })
    )
);

How to extract return value from store dispatch RxJs

2 Answers