NGRX/RXJS observer not emitting on page refresh

Question

I have a component that allows a user to edit an entry. If the user arrives to the edit page from the previous component (table) my observer is able to select the user from the Store and populate the fields with the correct data.

If I refresh the page however, the observer does keep returning null. What's odd is the nGif on the edit form fills out the correct label from the user. That tells me that the Observable object isn't null since nGif wouldn't render the labels. The observer who's subscribed to it seems to be the problem.

Form:

<form id="editContainer" [formGroup]="editForm" *ngIf="userObjectUnderEdit | async as userEdit">
        <div class="form-group">
            <mat-form-field appearance="standard">
            <mat-label>{{userEdit.name}}</mat-label>
            <input class="formInput" matInput placeholder="{{userEdit.name}}" formControlName="name" required>
            </mat-form-field>
        </div>
        <div class="form-group">
            <mat-form-field appearance="standard">
                <mat-label>{{userEdit.email}}</mat-label>
                <input class="formInput" resizeToFitContent="true" matInput placeholder="{{userEdit.email}}" formControlName="email" required>
              </mat-form-field>
        </div>
...

Component:

ngOnInit() {
    console.log('in ngoninit');
    this.editBuildForm();
    this.loaduserForEdit();
    
    // this.setEditFormValues();
  }

  loadUserForEdit() {
    const routeSubscription = this.store.select(getCurrentRouteState).pipe(take(1)).subscribe(route => {
        const userId = route.params.userId;
        console.log("route params id: ", userId);
        this.store.dispatch(loadEditeduser({userId}));
        this.store.dispatch(setEditeduserId({userId}));
    });
    this.userObjectUnderEdit = this.store.select(getCurrentuser);
    const userFillSubscriber = this.userObjectUnderEdit.subscribe(user => this.userFormFill = user);
    this.setEditFormValues(this.userFormFill);
    userFillSubscriber.unsubscribe();
    routeSubscription.unsubscribe();
}

const userFillSubscriber = this.userObjectUnderEdit.subscribe(user => this.userFormFill = user); ^ user is null whenever page is refreshed. However, the ngIf still populates the mat-labels so userObjectUnderEdit is still working correctly.

Answer 1

    const userFillSubscriber = this.userObjectUnderEdit.subscribe(user => this.userFormFill = user);
    this.setEditFormValues(this.userFormFill);

You are setting the property userFormFill inside the subscribe block and then running

 this.setEditFormValues(this.userFormFill);

I'm going to borrow T. van den Berg's code but modify it slightly:

const userFillSubscriber = this.userObjectUnderEdit.pipe(
    filter(user => !!user), 
    take(1)
).subscribe(user => {
    this.userFormFill = user;
    this.setEditFormValues(this.userFormFill) // add this line inside your subscribe as well
});