NGRX Effect运行正常但Store未存储正确数据问题排查求助

1. 修复Action类型标识重复问题 #

你在UserActions.ts中定义的FetchUsersFail的类型标识和成功Action完全一致，会导致异常逻辑冲突，修改为正确的失败标识：

// 修改前
export const FetchUsersFail = createAction(
  '[USER] FETCH SUCCESS',
  props<{ error: string }>()
);
// 修改后
export const FetchUsersFail = createAction(
  '[USER] FETCH FAIL',
  props<{ error: string }>()
);

2. 修复Reducer中成功回调未重置loading的问题 #

你在处理成功Action时，没有将loading状态重置为false，导致请求结束后loading一直为true：

// 修改前
on(UserActions.FetchUsersSuccess, (state, { data }) => {
  return { ...state, users: [...state.users, ...data] };
})
// 修改后
on(UserActions.FetchUsersSuccess, (state, { data }) => {
  return { ...state, loading: false, users: [...state.users, ...data] };
})

3. 为Effect添加错误处理逻辑 #

当前Effect没有处理请求异常的场景，一旦请求报错会导致Effect终止运行，添加catchError逻辑：
首先从rxjs导入对应依赖：

import { map, exhaustMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

然后修改Effect逻辑：

userFetch$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserActions.FetchUsersRequest),
    exhaustMap((action) =>
      this.userService.getUsers().pipe(
        map((response: any) => {
          console.log(response);
          return UserActions.FetchUsersSuccess({ data: response });
        }),
        // 新增错误处理
        catchError((err) => of(UserActions.FetchUsersFail({ error: err.message })))
      )
    )
  )
);

4. 修正组件中状态选择的逻辑 #

你在AppComponent中store.select('users')拿到的是整个用户模块的状态对象（包含loading、error、users三个属性），如果要获取用户数组，需要修改选择逻辑：

// 方法1：直接选择嵌套属性
this.users$ = this.store.select(state => state.users.users);

// 方法2：使用NGRX的select重载
this.users$ = this.store.select('users', 'users');

如果你需要保留整个状态对象，在模板使用时需要额外取users属性，示例：*ngFor="let user of (users$ | async)?.users"。

5. 确认文件导入路径匹配 #

检查App.module.ts中导入UserEffects的路径是否和实际文件名一致，你提供的Effect文件名为UserEffect.ts，但导入路径是./User/Users.effects，如果实际文件名不匹配会导致Effect不生效，根据实际文件名修正导入路径即可。

修改完成后即可正常在Store中看到返回的用户数据。

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