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

的问题可能是由于异步操作导致的。在Angular应用中，ngrx是一个用于状态管理的库，它基于Redux模式，通过存储和管理应用的状态来实现数据的一致性和可预测性。

当使用firebase进行异步操作时，例如从数据库获取数据或执行其他操作，可能会导致ngrx存储不及时更新UI的问题。这是因为异步操作的结果需要一定的时间才能返回，并且在返回之前，ngrx可能已经完成了状态的更新。因此，需要采取一些措施来确保ngrx存储及时更新UI。

解决这个问题的一种方法是使用rxjs的Observable来处理异步操作。在Angular中，可以使用rxjs的from函数将firebase promise转换为Observable，并使用ngrx的Effect来处理这个Observable。Effect是ngrx提供的一个中间件，用于处理副作用，例如异步操作。

首先，需要在ngrx的store中定义一个action，用于触发异步操作。例如：

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 }>());

然后，在ngrx的effect中处理这个action，并将firebase promise转换为Observable。例如：

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) {}
}

在上面的代码中，loadFirebaseData$是一个Effect，它监听[Data] Load Firebase Data这个action，并在触发时调用dataService.getData()方法获取数据。然后，使用map操作符将数据转换为[Data] Load Firebase Data Success这个action，并使用catchError操作符处理错误情况。

最后，在组件中触发[Data] Load Firebase Data这个action，并订阅ngrx存储中的数据。例如：

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());
  }
}

在上面的代码中，data$是一个Observable，它订阅ngrx存储中的数据。在组件初始化时，触发[Data] Load Firebase Data这个action，从而开始异步操作。当数据更新时，data$会自动更新，并更新UI。

需要注意的是，以上代码只是一个示例，实际情况可能会有所不同。具体的实现方式取决于应用的架构和需求。

推荐的腾讯云相关产品和产品介绍链接地址：