CODEWITHSUNDEEP
angularrxjsngrxeffects
Aymen Ragguem
Aymen Ragguem

Reputation: 196

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

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

Upvotes: 1

Views: 859

Answers (1)

Amer
Amer

Reputation: 6716

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

Upvotes: 2

Related Questions