Angular集成NgRx无响应及Store DevTools编译报错求助

看起来你在从零学习NgRx时踩了两个常见的坑：一是Effects完全没触发，二是Store DevTools版本不兼容导致编译错误。我来帮你逐一解决：

一、Store DevTools 编译错误：版本不兼容 #

这些错误的根源是你的Angular版本和@ngrx/store-devtools版本不匹配：

• OpaqueToken 在Angular 4.x之后就被InjectionToken取代了，旧版的store-devtools还在依赖这个已废弃的API。
• Dispatcher和Reducer在NgRx的新版本中导出方式已经变更，旧版devtools找不到这些导出项。

修复步骤： #

1. 先确认你的Angular版本：在终端运行ng version，查看@angular/core的主版本号（比如12、14、16）。
2. 安装对应版本的store-devtools：
   如果你的Angular是v12，就装v12的store-devtools：

   npm install @ngrx/store-devtools@12 --save-dev
   

   要是你是新项目，直接用Angular CLI添加兼容的NgRx全家桶更省心：

   ng add @ngrx/store@latest
   ng add @ngrx/store-devtools@latest
   

二、CarEffects 不执行（console.log("true")没输出） #

核心问题是你没在AppModule中注册Effects模块！NgRx Effects不会自动生效，必须手动导入并注册你的Effects类。另外还有几个逻辑细节需要修正：

1. 先注册EffectsModule到AppModule #

修改AppModule.ts，添加Effects的导入和注册：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CarComponent } from './car/car.component';
import { StoreModule } from '@ngrx/store';
import { carReducer } from './car/car.reducer';
import { HttpClientModule } from '@angular/common/http';
// 新增这两行导入
import { EffectsModule } from '@ngrx/effects';
import { CarEffects } from './car/car.effects';

@NgModule({
  declarations: [ AppComponent, CarComponent ],
  imports: [ 
    BrowserModule, 
    StoreModule.forRoot({car: carReducer}), 
    HttpClientModule,
    // 注册你的CarEffects
    EffectsModule.forRoot([CarEffects]) 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这一步做完后，你的Effects应该就能触发，console.log("true")会正常输出了。

2. 修正State与Reducer的类型冲突 #

你的AppState定义里car是Car类型，但carReducer返回的是Car[]数组，这会导致类型不匹配，状态管理会出问题：

• 先修改AppState：

  import { Car } from './../../models/car.model';
  export interface AppState { 
    readonly car: Car[]; // 改成数组类型，和reducer返回值一致
  }
  

• 同时调整reducer的初始状态（当前初始状态是带空Car的数组，如果你需要空初始数组，可以改成state: Car[] = []）：

  const initialState: Car[] = []; // 更合理的初始状态
  export function carReducer(state: Car[] = initialState, action: CarActions.Actions) {
    switch (action.type) {
      case CarActions.ADD_CAR:
        return [...state, action.payload];
      case CarActions.ADD_CAR_FAIL:
        // 注意：当前state是数组，不能直接加carError属性！建议重新设计状态结构，比如：
        // export interface AppState { cars: Car[], error: string | null }
        // 这里先临时返回原state避免类型错误，后续再优化
        return state;
      default:
        return state;
    }
  }
  

3. 优化Effects的流逻辑（避免流终止） #

你当前的Effects中map操作只做了localStorage.setItem，没有返回Action，这会导致Observable流终止，后续的错误处理也可能失效。另外，当前的action分工不合理（ADD_CAR既用来触发API，又用来更新状态），建议拆分：

• 先在car.actions.ts中新增触发请求的action：

  import { Action } from '@ngrx/store';
  import { Car } from './../../models/car.model';
  export const ADD_CAR_START = '[CAR] Add Start'; // 触发API请求
  export const ADD_CAR_SUCCESS = '[CAR] Add Success'; // 请求成功更新状态
  export const ADD_CAR_FAIL = '[CAR] Fail'; // 请求失败
  
  export class AddCarStart implements Action {
    readonly type = ADD_CAR_START;
    constructor(public payload: Car) {}
  }
  
  export class AddCarSuccess implements Action {
    readonly type = ADD_CAR_SUCCESS;
    constructor(public payload: Car) {}
  }
  
  export class AddCarFail implements Action {
    readonly type = ADD_CAR_FAIL;
    constructor(public payload: string) {}
  }
  
  export type Actions = AddCarStart | AddCarSuccess | AddCarFail;
  

• 调整Effects监听ADD_CAR_START，请求成功返回AddCarSuccess：

  @Effect() 
  carAddStart = this.actions$.pipe(
    ofType(CarActions.ADD_CAR_START),
    switchMap((carData: CarActions.AddCarStart) => {
      console.log('true'); // 现在肯定能打印了
      return this.http.post('http://myapi.com/api', { 
        brand: carData.payload.brand, 
        model: carData.payload.model 
      }).pipe(
        map(resData => { 
          localStorage.setItem('test', 'asdasdasd');
          return new CarActions.AddCarSuccess(carData.payload); // 返回成功action，让reducer更新状态
        }),
        catchError(errorRes => {
          console.log(errorRes);
          let errorMessage = 'An unknown error occurred!';
          if (errorRes.error?.error?.message) {
            errorMessage = errorRes.error.error.message;
          }
          return of(new CarActions.AddCarFail(errorMessage));
        })
      );
    })
  );
  

• 最后调整Reducer处理ADD_CAR_SUCCESS：

  switch (action.type) {
    case CarActions.ADD_CAR_SUCCESS:
      return [...state, action.payload];
    case CarActions.ADD_CAR_FAIL:
      // 建议在AppState中添加error字段来存储错误信息，比如：
      // return { ...state, error: action.payload };
      return state; // 临时处理，后续优化状态结构
    default:
      return state;
  }
  

额外小贴士 #

• 安装好正确版本的Store DevTools后，在AppModule中添加StoreDevtoolsModule.instrument({ maxAge: 25 })，就能在Chrome DevTools的Redux标签里直观查看状态变化和action流，调试NgRx超方便。
• 组件中要dispatch AddCarStart而不是AddCar，这样才能触发Effects里的API请求哦。

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