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

Question

环境：离子 6，Angular13。

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

问题：在调度操作后，来自 API 的数据正常。

this.store.dispatch(UsersActions.loadFilteredUsers(请求));

在对 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 }>()
);

Effects.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)
        )
      )
    );
  });

Reducer.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 ... ect

配置 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 字符串执行两个操作。这也是重点：动作应该是 single-source-single-goal。修改 type 字符串即可。

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

NGRX Ionic : createReducer is calling all actions

redux

ngrx

ngrx-effects

angular

ngrx-store