Agular Store effects not waiting for selectors data

153 Views Asked by At

Am working on an Angular project using NgRx store. All the back end responses are saved in the store.

This is my effects.ts

loadData$ = createEffect(() => this.actions$.pipe(
      ofType('[Data] Load Data'),
      concatMap((action: any) => of(action).pipe(
        withLatestFrom(this.store$.pipe(select(selectorData)))
        
      )),
      switchMap(([, request]: any) => this.Service.getDataApi(
          request.data1.iid,
          request.data2.iid2
        )
        .pipe(
          map((data: Data[]) => ({
              type: '[Data] Load Success',
              payload:  { data },
            }
          )),
          catchError((error: any) => of({
              type: '[Datae]] Load Failure',
              payload:  { error },
            }
          ))
        ))
    )
  );

How can i wait for selectorData data? Is there any specific method for that? Current implementation idd and iid2 are empty.

Thanks in advance.

Edit 1 I have made below changes

concatMap((action: any) => of(action).pipe(
        withLatestFrom(this.store$.pipe(select(selectorData),skipWhile(iid => !iid),
        skipWhile(iid2 => !iid2),
        mapTo(true))
        )

Above changes it will not call with the API.how can i call if the data is available

Edit 2

filter(([, {configData}]: any) => configData.iid &&
      configData.iid)

I have tried filter as well. First time configData.iid is undefined.how can we solve this issue

It throwing undefined error

Edit 3 I have tried combineLatestWith.it doesn't wait for this.store$.pipe(select(selectorData))

Any other solution for waiting data?

1

There are 1 best solutions below

1
Daniel B On

You can use combineLatest to wait for multiple actions or source observables.

loadData $ = createEffect(() => {
    return combineLatest(
      this.actions$.pipe(
          ofType('[Data] Load Data')
      ),
      this.store$.pipe(
          select(selectorData),
          filter(iid => !!iid) // Filters untruthy values
      )
    ).pipe(
      // Wont come here until both observables have emitted
      ...
    )