Why ngrx return 2 objects even if I add takeUntil and skipWhile?

Question

In my situation I should have just an array list with my publications. But I got 2 list, the first is empty and the second is my real list.

I don't use async in my html, it's just a ngfor I take from my subscribe.

In my ngOnInit :

this.publication$ = this.store$.pipe(
    skipWhile(val => val == null),
    select(PublicationFeatureStoreSelectors.selectAllPublicationFeatureItems),
    filter(value => value !== undefined),
);

this.publication$.subscribe(data => {
    takeUntil(this.ngDestroyed$),
        this.piins = data;
    this.publicationAppeared = data.map(a => a._id);
    this.checkIfLiked();
    console.log(data);
});

In my ngOnDestroy :

this.ngDestroyed$.next();
this.ngDestroyed$.complete();

My selector

export const selectAllPublicationsFeatureItems: (
  state: object
) => Publications[] = featureAdapter.getSelectors(selectPublicationsFeatureState).selectAll;

export const selectPublicationsFeatureState: MemoizedSelector<
  object,
  State
> = createFeatureSelector<State>('publicationFeature');

This is my result :

[]
(3) [{…}, {…}, {…}]

This is in my reducer :

    case ActionTypes.GET_PUBLICATION_SUCCESS: {

       const myobject = featureAdapter.addAll(action.payload, {
        ...state,
        isLoading: false,
        error: null
      });

      console.log(myobject); // the result is just below

      return myobject;
    }

Result of console.log :

{ids: Array(3), entities: {…}, isLoading: false, error: null}
entities: {5d0261c743d8c30793eb8d25: {…}, 5d01713c7f353a1a81349299: {…}, 5d0170a67f353a1a81349295: {…}}
error: null
ids: (3) ["5d0261c743d8c30793eb8d25", "5d01713c7f353a1a81349299", "5d0170a67f353a1a81349295"]
isLoading: false
__proto__: Object

The result it's exactly like that I got on reduxTool

If you have the solution to don't use and don't call the first array list thank you so much.

I almost have to use my method checkIfLiked() just one time

Answer 1

This looks so familiar!

I'd suggest you to tap(console.log) debug your stream so you see what's going on there, something like:

this.publication$ = this.store$.pipe(
  tap(val => console.log('skipWhile', val, val == null)),
  skipWhile(val => val == null),
  select(PublicationFeatureStoreSelectors.selectAllPublicationFeatureItems),
  tap(value => console.log('filter', value, value !== undefined)),
  filter(value => value !== undefined),
);

And the output will be clear about which condition is passing and what's going wrong.
Good luck!