从firebase promise调度操作后，ngrx存储不更新UI

import { createAction, props } from '@ngrx/store';

export const loadFirebaseData = createAction('[Data] Load Firebase Data');
export const loadFirebaseDataSuccess = createAction('[Data] Load Firebase Data Success', props<{ data: any }>());
export const loadFirebaseDataFailure = createAction('[Data] Load Firebase Data Failure', props<{ error: any }>());

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { DataService } from 'path-to-data-service';

@Injectable()
export class DataEffects {
  loadFirebaseData$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[Data] Load Firebase Data'),
      mergeMap(() =>
        this.dataService.getData().pipe(
          map((data) => ({ type: '[Data] Load Firebase Data Success', data })),
          catchError((error) => of({ type: '[Data] Load Firebase Data Failure', error }))
        )
      )
    )
  );

  constructor(private actions$: Actions, private dataService: DataService) {}
}

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { loadFirebaseData } from 'path-to-actions';
import { selectData } from 'path-to-selectors';

@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ data | json }}</div>
  `,
})
export class MyComponent implements OnInit {
  data$ = this.store.select(selectData);

  constructor(private store: Store) {}

  ngOnInit() {
    this.store.dispatch(loadFirebaseData());
  }
}