NgRx Action与Effect无法返回对象数组问题求助

核心错误原因 #

控制台的两个错误指向同一问题：

• Effect中直接返回了API获取的UserJobs数组，而非符合NgRx规范的Action对象（必须包含type属性）
• 修改后的Effect存在语法错误（重复调用服务、管道嵌套逻辑混乱）

分步修正方案 #

1. 修正Action定义（强类型约束） #

将payload类型从any改为明确的UserJobs[]，避免类型模糊：

// Action.ts
import { createAction, props } from '@ngrx/store';
import { UserJobs } from './path-to-your-models';

export const userLoadJobs = createAction(
  '[UserJobs] userLoadJobs',
);

export const userLoadJobsSuccess = createAction(
  '[UserJobs] userLoadJobs Success',
  props<{ payload: UserJobs[] }>()
);

2. 修复Effect的语法与逻辑错误 #

移除重复的服务调用，确保API返回的User对象中提取出jobs数组，通过userLoadJobsSuccess Action正确派发：

// Effect.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { exhaustMap, map } from 'rxjs/operators';
import { userLoadJobs, userLoadJobsSuccess } from './actions';
import { UserService } from './path-to-user-service';
import { AuthService } from './path-to-auth-service';

@Injectable()
export class JobsStateEffects {
  loadUserJob$ = createEffect(() => 
    this.actions$.pipe(
      ofType(userLoadJobs),
      exhaustMap(() => 
        this.userService.getUserContactData(this.authService.userID).pipe(
          map(user => userLoadJobsSuccess({ payload: user.jobs || [] }))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private userService: UserService,
    private authService: AuthService
  ) {}
}

3. 确保Reducer正确处理Success Action #

确认userLoadJobsSuccess Action已被导入并关联到Reducer逻辑：

// Reducers.ts
import { createReducer, on } from '@ngrx/store';
import { userLoadJobs, userLoadJobsSuccess } from './actions';
import { InitialState, initialState } from './path-to-state';

const appReducer = createReducer(
  initialState,
  on(
    userLoadJobs,
    state => ({
      ...state,
      loading: true
    })
  ),
  on(userLoadJobsSuccess, (state, { payload }) => ({
    ...state,
    loading: false,
    jobs: [...payload]
  }))
);

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

4. 组件中正确派发Action #

使用预定义的userLoadJobs Action，避免手动编写type字符串（减少拼写错误）：

// 组件代码
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { userLoadJobs } from './path-to-actions';
import { selectUserJobs } from './path-to-selectors';
import { Observable } from 'rxjs';
import { UserJobs } from './path-to-models';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  userJobs$: Observable<UserJobs[]> = this.store.select(selectUserJobs);

  constructor(private store: Store) {}

  ngOnInit(): void {
    this.store.dispatch(userLoadJobs());
  }
}

验证步骤 #

1. 启动应用后打开Redux DevTools，检查是否有[UserJobs] userLoadJobs和[UserJobs] userLoadJobs Success两个Action被正常派发
2. 查看Store中jobState.jobs是否已填充正确的UserJobs数组
3. 确认组件通过userJobs$订阅的数据可正常渲染

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