angular - ngrx store uppdateras inte på en annan rutt förrän sidan laddas om

Jag har en Angular 7-applikation där jag använder ngrx. När jag lägger till ett filobjekt i min store ser jag förändringarna i redux-inspektören men whenever jag går till routen som visar filerna får jag inte den nyligen tillagda filen förrän jag laddar om webbläsaren. Jag har försökt att ta reda på vad som orsakar detta men har inte lyckats hittills.

Reducerare :

case FilesActionTypes.GET_FILES:
    return { ...state, loading: true };
case FilesActionTypes.GET_FILES_SUCCESS:
    return adapter.addAll(action.payload.data, state);
case FilesActionTypes.UPLOAD_FILE_SUCCESS:
      return adapter.addOne(action.payload.file, { ...state, loading: false });

Jag använder bara standardselectorn selectAll. Selector:

export const selectAllFiles = createSelector(selectFilesState, selectAll);

Det här är min komponent där jag visar filerna:

export class UserComponent implements OnInit {
  public id: string;
  public files$: Observable<any>;
  public user$: Observable<any>;

  constructor(private route: ActivatedRoute,
              private filesStore: Store<FilesState>,
              private usersStore: Store<UsersState>) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.files$ = this.filesStore.select(selectAllFiles);
    this.user$ = this.usersStore.select(selectCurrentUser);
    this.usersStore.dispatch(new GetUserAction({ id: this.id, params: null }));
    this.filesStore.dispatch(new GetFilesAction({ query: { entityId: this.id, entityService: 'users' }}));
  }

}

och min mall:

 <ng-template ngbTabContent>
      <div *ngFor="let file of files$ | async">
        <a [href]="['http://localhost:3030/files/'] + file._id" target="_blank">{{ file.name }}</a>
       </div>
 </ng-template>

Om du behöver mer kod kan jag tillhandahålla det. Tack på förhand.

REDIGERA: Jag har begränsat mitt problem lite mer.

Jag har en /users-rutt och en /users/:id-rutt. Om jag lägger till en fil (från /users-rutten) utan att först gå till /users/:id-rutten, kan jag se den uppdaterade listan över filer när jag navigerar till /users/:id-rutten. Men om jag går till /users/:id-rutten och tillbaka till /users och lägger till en fil, och sedan återigen går till min /users/:id, ser jag inte den uppdaterade listan över filer förrän jag laddar om sidan.

Kanske kan detta hjälpa dig att hjälpa mig.

Svar #1

Jag tror att du missade parenteserna <div *ngFor="let file of (files$ | async)">
Du kan dock kontrollera om datan finns innan du gör ngFor

 <ng-template ngbTabContent *ngIf="files$ | async as files">
   <div *ngFor="let file of files">
    <a [href]="['http://localhost:3030/files/'] + file._id" target="_blank">{{ file.name }}</a>
   </div>
 </ng-template>

Svar #2

Det verkar som att problemet var på serversidan.

Problemet är löst. Ha en trevlig dag!