升级@ngrx/store至8.5.2后Effect类型不匹配错误求助

Got it, let's break down what's going wrong here and fix it step by step. The core issue is that you're using old NgRx Action patterns with the new 8.x+ API, which uses function-based Actions instead of class-based ones. Let's get your code aligned with the latest规范.

First, Let's Fix the Effect Code (The Main Culprit) #

Your current Effect is trying to instantiate an Action like it's a class (new actions.LoadSponsorsSuccess(users)), but with createAction in NgRx 8+, Actions are functions that return Action objects (which automatically include the required type property). Here's the corrected version:

import { Injectable } from "@angular/core";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import * as listActions from "../actions/list.actions";
import { concatMap, map, catchError } from "rxjs/operators";
import { ListService } from "./../../list.service";
import { IListAll } from "./../../list.model";
import { of } from "rxjs";

@Injectable()
export class ListEffects {
 loadLists$ = createEffect(() => this.actions$.pipe(
  // Listen for the loadLists action
  ofType(listActions.loadLists),
  // Call the service, then map the response to the success action
  concatMap(() => this.listService.getLists().pipe(
   map((list: IListAll[]) => listActions.loadListsSuccess({ list })),
   // Handle errors by returning the failure action
   catchError(error => of(listActions.loadListsFailure({ error })))
  ))
 ));

 // Don't forget to add private to listService so it's accessible in the class
 constructor(private actions$: Actions, private listService: ListService) {}
}

Key Fixes in the Effect: #

1. Replaced class-based Action instantiation: Instead of new actions.LoadSponsorsSuccess(users), we call listActions.loadListsSuccess({ list }) — this is the function you created with createAction, and it returns a valid Action object with the type property.
2. Corrected the parameter structure: Your loadListsSuccess Action expects a prop with a list key, so we pass { list: ... } to match the props definition.
3. Added error handling: Using catchError ensures we return a failure Action when the API call fails, which keeps the Observable alive and follows NgRx best practices.
4. Fixed service access: Added private to listService in the constructor so the class can actually use it.

Then, Let's Clean Up Your Reducer (It Was Missing Action Handlers) #

Your current Reducer doesn't handle the loadListsSuccess or loadListsFailure Actions, so even if the Effect works, your store won't update. Here's the corrected version:

import { Action, createReducer, on } from "@ngrx/store";
import { IListAll } from "../../list.model";
import * as ListActions from "../actions/list.actions"; // Fixed import naming for clarity

export const listFeatureKey = "list"; // Standardized to camelCase
export interface State {
 listAll: IListAll[] | null;
}
export const initialState: State = {
 listAll: []
};

const listReducer = createReducer(
 initialState,
 // No changes needed for loadLists, just pass through the state
 on(ListActions.loadLists, state => ({ ...state })),
 // Update state when load succeeds
 on(ListActions.loadListsSuccess, (state, { list }) => ({
  ...state,
  listAll: list
 })),
 // Handle failure (adjust this logic based on your needs)
 on(ListActions.loadListsFailure, (state, { error }) => ({
  ...state,
  listAll: null // Or keep the existing data, depending on your UX
 }))
);

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

Why This Works: #

• The on() handlers now catch the success/failure Actions from your Effect and update the store's state accordingly.
• We fixed the import naming (Listfrom → ListActions) to make the code more readable.

Quick Check of Your Action Definitions #

Your Action code looks good, but just double-check the typo in loadListsFailure's action type: it says [List] Load ListFailure (missing an "s" in "Lists"). It's a minor thing, but fixing it will keep your Action types consistent:

export const loadListsFailure = createAction(
 "[List] Load Lists Failure", props<{ error: any }>()
);

That's it! These changes will resolve the type error and get your NgRx workflow working properly with the 8.5.2 version.

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