NGRX Ionic：createReducer 正在调用所有操作

Question

环境：Ionic 6、Angular 13。

场景：从 1 个分页 API 获取数据。尝试构建另一个操作来更改页面、带来新数据并收集所有数据。

问题：在分派操作后，API 中的数据正常。

this.store.dispatch(UsersActions.loadFilteredUsers(req));

在对 reducer.ts 文件声明另一个操作案例后，尽管没有为此调度任何操作，但它仍在运行。

Actions.ts 文件

export const loadFilteredUsers = createAction(
  "[Fileterd Users] Load",
  props<{ userFiltered: IUsersFilteredRequest }>()
);

export const loadFilteredUsersSuccess = createAction(
  "[Fileterd Users] Success",
  props<{ userFiltered: any }>()
);

export const loadFilteredUsersFailure = createAction(
  "[Fileterd Users] Fail",
  props<{ error: string }>()
);

export const loadMoreUsers = createAction(
  "[Fileterd Users] Success",
  props<{ userFiltered: IUsersFilteredRequest }>()
);

效果.ts 文件

  loadfilteredUsers$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(UsersActions.loadFilteredUsers),
      switchMap((data: any) =>
        this.filterUserservice.filterUserOntime(data).pipe(
          map((userFiltered) =>
            UsersActions.loadFilteredUsersSuccess({ userFiltered })
          ),
          catchError((error) =>
            of(UsersActions.loadFilteredUsersFailure({ error }))
          ),
          shareReplay(1)
        )
      )
    );
  });

减速器.ts 文件

export const UsersFileterdReducer = createReducer<UsersFilteredState>(
  initialState,
  on(
    UsersActions.loadFilteredUsersSuccess,
    (state, action): UsersFilteredState => {
      return {
        ...state,
        userFiltered: action.userFiltered,
        error: "",
      };
    }
  ),
  on(
    UsersActions.loadFilteredUsersFailure,
    (state, action): UsersFilteredState => {
      return {
        ...state,
        userFiltered: [],
        error: action.error,
      };
    }
  ),
  on(UsersActions.loadMoreUsers, (state, action): UsersFilteredState => {
    console.log("loadMoreUsers", action, "satet", state);
    return {
      ...state,
      // userFiltered: [...state.userFiltered["response"], action.userFiltered],
    };
  })
);

尝试添加runtimeChacks以实现不变性，但没有改变。 strictStateImmutability: true ... 等

app.module.ts 和 tabs.module.ts 处的配置

--------app.module.ts-------------------
     StoreModule.forRoot({}),
    EffectsModule.forRoot([]),

------- tabs.module.ts -------------
    StoreModule.forFeature("UsersFileterdReducer", UsersFileterdReducer),
    EffectsModule.forFeature([UserPersonalffects]),

当在 loadMoreUsers 的情况下添加减速器时，问题直接开始，尽管我没有为此调用任何操作，但问题仍然开始。

Answer 1

操作由其类型决定。两个操作不能使用相同的 type 字符串。这也是重点：行动应该是单一来源、单一目标。修改type字符串就可以了。