NgRx集成问题：组件无法响应Store状态变更，请求排查

搭建简单NgRx组件时，计划在模板中使用async管道响应值的变化，但遇到以下问题：尽管effect已成功获取数据（网络请求返回正常），reducer函数也被调用（断点可验证），但预期显示记录ID列表的部分无变化。组件中订阅sharedDashboards$后，始终只打印出reducer初始状态的undefined。

代码实现 #

Actions #

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

export const fetchSharedDashboards = createAction('[Dashboard] Fetch Shared Dashboards');

export const fetchSharedDashboardSuccess = createAction(
  '[Dashboards API] Fetch Shared Dashboards Success',
  props<{ data: any }>()
);

Reducers #

import { createReducer, on, Action } from '@ngrx/store';
import * as DashboardActions from './dashboard.actions';
import { SharedDashboardItem } from '@al/dashboards';

export const appFeatureKey = 'dashboards';

export interface DashboardState {
  sharedDashboards: SharedDashboardItem[];
}

export const initialState: DashboardState = {
  sharedDashboards: null
};

export const appReducer = createReducer(
  initialState,
  on(DashboardActions.fetchSharedDashboardSuccess, (state: DashboardState, action) => ({
    ...state,
    sharedDashboards: action.data,
  }))

);

export function reducer(state: DashboardState | undefined, action: Action) {
  return appReducer(state, action);
}

Effects #

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { EMPTY, from } from 'rxjs';
import { map, catchError, switchMap } from 'rxjs/operators';
import * as AppActions from './dashboard.actions';
import { DashboardsClient } from '@al/dashboards';

@Injectable()
export class DashboardEffects {

  onFetchSharedDashboards$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(AppActions.fetchSharedDashboards),
      switchMap(() => from(DashboardsClient.listDashboardGroups('2'))
        .pipe(
          map(data => {
            console.log(data) // 此处正常打印包含dashboard_items数组的对象
            return AppActions.fetchSharedDashboardSuccess({data: data.dashboard_items}
          )}),
          catchError(err => {
            console.error('error')
            return EMPTY;
          })
        ))
      )
      });

  constructor(
    private actions$: Actions
  ) {}
}

组件TS #

import { SharedDashboardItem } from "@al/dashboards";
import { Component, OnInit } from "@angular/core";
import { Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { fetchSharedDashboards } from "./dashboard.actions";
import { DashboardState } from "./dashboard.reducer";

@Component({
  selector: 'app-dashboards-list',
  templateUrl: './dashboards-list.component.html'
})

export class DashboardsListComponent implements OnInit {

  sharedDashboards$: Observable<SharedDashboardItem[]> = this.store.select(state => state.sharedDashboards);
 
  constructor(private store: Store<DashboardState>) {}
 
  ngOnInit() {
    this.store.dispatch(fetchSharedDashboards());
    this.sharedDashboards$.subscribe(val => {
      console.log(val) // 始终只打印初始状态的undefined
    })
  }

}

组件HTML #

<div *ngFor="let shared of sharedDashboards$ | async">
  <div>{{shared.id}}</div>
</div>

问题解决 #

问题出在Store的状态路径引用错误：在特性模块配置中，使用了feature key dashboards来注册Store，配置代码如下：

StoreModule.forRoot({ [fromApp.appFeatureKey]: fromApp.reducer })

因此组件中需要通过正确的路径从Store中选择状态，修正后的组件状态选择器代码如下：

sharedDashboards$: Observable<SharedDashboardItem[]> = this.store.select((state: any) => state.dashboards.sharedDashboards);

修正后视图正常展示数据，订阅也能获取到更新后的状态值。

内容的提问来源于stack exchange，提问作者mindparse