ActiveId emitting undefined, value and then undefined again when using in factory provider.

[Benny739]

I'm experiencing a weird behavior and I can not find out through what it is caused.
I'm using a factory provider to get an active id.

export const SCHOOL_ID_PROVIDER: Provider =
{
    provide: SCHOOL_ID,
    deps: [SchoolsQuery],
    useFactory: schoolIdFactory,
};

export function schoolIdFactory(
    schoolsQuery: SchoolsQuery
): Observable<string> {
    return schoolsQuery.selectActiveId();
}

I import the provider in AppModule and the weird thing is the output:
undefined -> activeId -> undefined
But when undefined is emitted (3rd value) and I check the store value, the activeId is still the one that has been emitted before.
This only happens, when I'm using the query in a factory. When I subscribe in app module or in app.component, I get undefined and then the activeId and no 3rd emission.

The activeId gets set in an auth guard. Once the app is running everything works as expected.

this.schoolsQuery.selectLoading().pipe(
      filter(l => !l),
      switchMap(_ => this.schoolsQuery.selectEntity(schoolId)),
      tap(school => this.schoolsService.setSchoolActive(school.id))

If after the filter(l => !l), I introduce an observeOn(asyncScheduler), everything works as expected.
This is not a problem, because I can just filter the undefined values, because I don't need them. But I would really like to know what is going on.

Regards
Benny

[vervallsweg]

I experience the exact same thing when subscribing to a select observable in a brand new project.

subscribing in a lazy loaded submodule

undefined (initial) => value (that I set in the service) => undefined (?) ❌

state, in redux dev tools

undefined (initial) => value (that I set in the service) ✅

Since the state is always correct, it makes me believe it's only a problem of the selectEntity/selectAll observable.

That left my completely puzzled for a day. One would assume that the redux dev tools would reflect the state changing three times, which it doesn't. Why does the observable emit a value that is not reflected in the state?

However I'm new to akita, so maybe I'm doing something wrong here. After I found your issue describing that it depends on where you subscribe to the select observable, I tried that myself and sure enough, same thing here.

subscribing in app.component

undefined (initial) => value (that I set in the service) ✅

The subscription code blocks are below and seem identical to me.

things i considered

First of it is a new project, with two stores. The first store is only in the app.module, the second in the submodule. This makes debugging considerably easier, since you can still do simple project wide string searches to see where methods are called.

1. is the service setting the active entity correctly?

Yes, if I tap the pipe that sets it like so:

.pipe(
      tap(id => { console.log('store setting active id:', id); }),
      tap(id => { this.store.setActive(id); })
 );

I get the correct and expected output of store setting active id: kr5cLCMMcCmAWoAnktkP. That's it. The redux devtools confirm that: undefined (initial) => value (that I set in the service)

2. is the store updated from any other place?

No. As said, with a new project you can still do a simple search. update( (0), setActive( (1, well in the snippet from above).

3. are there .subscribe side effects?

Since I just bind the result to a template, pipe it through async | json, I thought the angular template subscription might cause this. No, removing it from the template doesn't make any difference.
Removing the duplicate subscriptions doesn't change its behavior at all. Here's they are:

submodule/component.ts

    this.siteSetting$ = this.siteSettingsQuery.selectActive();

    this.siteSetting$.subscribe({
      next: value => console.log('submodule: ', value),
    });

submodule/component.html

   <p>current: {{ siteSetting$ | async | json }}</p>

app.component.ts

    this.siteSettingsQuery.selectActive().subscribe({
      next: value => console.log('app:', value),
    });

why undefined?

Since it's the default value. If you change the entityStore's default active value in it's constructor, that is the value that you're going to get as the last, incorrect value from the observable.

So changing it to foo you end up with:
'foo' (initial) => value (that I set in the service) => 'foo'

workaround

Well filtering undefined is not really an option for me, since my activeEntityId can be undefined. This is expected if nothing is selected.

So I introduced three 'states':

• null default, we can filter the default value out since it's not relevant
• undefined as the value if there's actually no selection
• string the active entity id

Then I defined a custom query that replaces the inherited selectActive() (I might as well overwrite it).

  public selectActive$ = this.select('active').pipe(
    filter(value => value !== null)
  );

And last but not least you cannot set the activeId to undefined (again, undefined is expected in my project if the user selects nothing). I mean you can... it just won't update the state and doesn't throw an error or anything 🙃. Oh and that only doesn't work with the provided setActive(id) method. If you use update({active: id}) (with id undefined obviously) then that works and updates the state to undefined.
Not sure if this is the intended behaviour.

Anyhow, the pipe that set's the activeId then also needs to be changed accordingly.

.pipe(
      tap(id => { console.log('store setting active id:', id); }),
      tap(id => { this.store.update({active: id}); })
 );

Success ✨

I might setup a minimal project on stackblitz to reproduce it, as soon as I find time to do it. However the project is brand new and unless there are side effects I don't see (possible), it should be trivial to reproduce. Mostly I put this here for people that encounter the same thing and a possible workaround.

[kragoth]

We had similar problems but, this was due to the fact the Akita had not finished initialising when the selectActive() ran.
So, selectActive() always returned the default value.

To fix:

import { QueryEntity, selectPersistStateInit } from '@datorama/akita';

// before you access the store make sure it is ready:
selectPersistStateInit().subscribe(() => {
    // now you can use the store
}

May not be your problem but, this helped us.