How can I get two variables in effects from store to send it to API with angular ngrx

Question

this is effects methode I try to get skip number and selectUser to send it to Api, the skip is ok but selectuser not..

loadMoreAction$ = createEffect(() =>
    this.actions$.pipe(
      ofType(directMessagesAction.loadMoreAction),
      withLatestFrom(
        this.store.pipe(select(selectMyConversation)),
        this.store.pipe(select(selectUser))
      ),
      map(([{}, skip]) => skip),
      switchMap((skip) =>
        this.signalRService
          .getMoreMessageHistory({ skip })
          .pipe(
            map((result) =>
              directMessagesAction.loadMoreActionFinished({ payload: result })
            )
          )
      )
    )
  );

**this is App component **

  onUp(ev: any) {
    this.store.dispatch(directMessagesAction.loadMoreAction());
    this.spinner.show();
    console.log("scrolled up!", ev);
  }

this is select Online and offline user in app componenet

 selectChat(onlineusermodel: OnlineUserModel): void {
    console.log("DMC: selectedOnlineUserName   :" + onlineusermodel.userName);
    this.selectedOnlineUserName = onlineusermodel;
    this.stateUser = true;
    this.store.dispatch(
      directMessagesAction.selectedOnlineUserName({
        payload: this.selectedOnlineUserName,
      })
    );
  }

  selectChatOffline(offlineUserModel: OfflineUserModel): void {
    console.log("DMC: selectedOfflineUserName   :" + offlineUserModel.userName);
    this.selectedOnlineUserName = offlineUserModel;
    this.stateUser = false;
    this.store.dispatch(
      directMessagesAction.selectedOnlineUserName({
        payload: this.selectedOnlineUserName,
      })
    );
  }

Action :

export const selectedOnlineUserName = createAction(
  "[DM] LOAD SELECTED ONLINE OFFLINE USER",
  props<{ payload: OnlineUserModel }>()
);

the problem to solve is get infinite scroll function on selected user to get the history by skip and username

Answer 1

Since you're using the ofType NgRX operator, with the withLatestFrom operator and passing two Observable(s) into it, then the map operator's inputs, in this case, will be an array with 3 vars as [moreActionParam, skip, user], not [{}, skip].

You can try the following:

loadMoreAction$ = createEffect(() =>
    this.actions$.pipe(
        ofType(directMessagesAction.loadMoreAction),
        withLatestFrom(
            this.store.pipe(select(selectMyConversation)),
            this.store.pipe(select(selectUser))
        ),
        switchMap(([moreActionParam, skip, user]) =>
            // You can use `user` here...
            this.signalRService
                .getMoreMessageHistory({ skip })
                .pipe(map((result) => directMessagesAction.loadMoreActionFinished({ payload: result })))
        )
    )
);