CODEWITHSUNDEEP
angularrxjsobservable
fuscode
fuscode

Reputation: 3

return for SwitchMap in Rxjs - Angular

I'm using for the first time switchMap. It's telling me to return "something", but when I put a return it doesn't work.

 @Effect()
  subData$ = this.actions$.pipe(
    ofType(ActionTypes.SEARCH_SUB_DATA),
    map(action => action['payload']),
    switchMap(payload => { //Payload gets highlighted in red
      const repos = this.githubSearch.getRepos(payload);
      const followers = this.githubSearch.getFollowers(payload);
      const starred = this.githubSearch.getStarred(payload);
      return forkJoin([repos, followers, starred]).subscribe(results => {
        this.store.dispatch(
          new UserActions.SuccessSubData({
            user: payload,
            repos: results[0],
            followers: results[1],
            starred: results[2]
          })
        );
        return of(results);
      });
    })
  );

Argument of type '(payload: never) => Subscription' is not assignable to parameter of type '(value: never, index: number) => ObservableInput<{}>'. Type 'Subscription' is not assignable to type 'ObservableInput<{}>'.

UPDATE BASED ON ANSWER PROVIDED

@Effect()
      subData$ = this.actions$.pipe(
        ofType(ActionTypes.SEARCH_SUB_DATA),
        map(action => action['payload']),
        switchMap(payload => {
          return forkJoin(
            this.githubSearch.getRepos(payload),
            this.githubSearch.getFollowers(payload)
          );
        }).subscribe(results => {
          this.store.dispatch(
            new UserActions.SuccessSubData({
              user: payload,
              repos: results[0],
              followers: results[1]
            })
          );
        })
      );

Here's the picture showing the errors

image from error

Upvotes: 0

Views: 564

Answers (2)

KiraAG
KiraAG

Reputation: 783

@Effect()
  subData$ = this.actions$.pipe(
    ofType(ActionTypes.SEARCH_SUB_DATA),
    map(action => action['payload']),
    switchMap(payload => {
      return forkJoin(
        this.githubSearch.getRepos(payload),
        this.githubSearch.getFollowers(payload)
      ).pipe(map(([repos,followers]) => //return success action here), catchError(error => of(//return failaction))
    })
  )

Usually you don't have to subscribe, it will just return the stream and let ngrx handle the subscriptiona and unsubscription. SO here I am mapping success and failure callback actions. They will be automatically triggered by ngrx.

Upvotes: 1

Luillyfe
Luillyfe

Reputation: 6882

You are trying to merge an Observable with a Subscription and also when use forkJoin you are using with two undefined values. Code below must work for your case.

@Effect()
  subData$ = this.actions$.pipe(
    ofType(ActionTypes.SEARCH_SUB_DATA),
    map(action => action['payload']),
    switchMap(payload => {
      return forkJoin(
        this.githubSearch.getRepos(payload),
        this.githubSearch.getFollowers(payload)
      );
    })
  ).subscribe(results => {
      this.store.dispatch(
        new UserActions.SuccessSubData({
          user: payload,
          repos: results[0],
          followers: results[1]
        })
      );
    });

Upvotes: 0

Related Questions