同一州具有不同过滤器的多个列表 - NGRX 11 ANGULAR 11

Question

我正在研究 angular 11 和 NGRX 11 项目。我希望有 2 个输入 select，它们是不同用户类型的用户。

例如：

我有两种类型的用户（卖家和买家）：

第一个select（用户卖家），我调用我的API后端：/api/user?type=seller&page=0&size=10
第二个 select（用户买家），我调用我的 API 后端：/api/user?type=buyer&page=0&size=10

我使用 NGRX 并且我有一个商店用户，但是当我打电话给商店时，我 return 相同的用户列表。

如何分离用户卖家列表和用户买家列表？（2 家商店？2 select 或 2 家商店？）

user.action.ts

export const loadUsers = createAction(
  '[Users List] Load Users via Service',
  props<{ filters: UserFilter }>()
);

export const usersLoadedDone = createAction(
  '[Users Effect] Users Loaded Successfully',
  props<{ users: Page<User> }>()


export const loadUser = createAction(
  '[Users List] Load User via Service',
  props<{ userId: string }>()
);

export const createUser = createAction(
  '[Create User Component] Create User',
  props<{ event: any, user: User }>()
);

export const deleteUser = createAction(
  '[Users List Operations] Delete User',
  props<{ userId: string }>()
);


export const updateUser = createAction(
  '[Users List Operations] Update User',
  props<{ user: User }>()
);


export const userActionTypes = {
  loadUsers,
  usersLoadedDone,
  loadUser,
  createUser,
  deleteUser,
  updateUser,
};

user.reducers.ts


export interface UserState extends EntityState<User> {
  isLoading: boolean;
  totalElements: number;
  totalPages: number;
  empty: boolean;
  page: number;
  filters: UserFilter;
}

export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
  selectId: user => user.userId
});

export const initialState = adapter.getInitialState({
  isLoading: false,
  totalElements: null,
  totalPages: null,
  page: 0,
  empty: true
});

export const userReducer = createReducer(
  initialState,

  on(userActionTypes.loadUsers, (state, res) => ({
    ...state,
    isLoadingList: true,
    filters: res.filters
  })),

  on(userActionTypes.usersLoadedDone, (state, action) => {
    return adapter.setAll(
      action.users['content'],
      {
        ...state,
        isLoadingList: false,
        isLoad: true,
        totalElements: action.users.totalElements,
        totalPages: action.users.totalPages,
        empty: action.users.empty,
        page: action.users.number,
      }
    );
  }),

  ...
);

export const {selectAll, selectIds} = adapter.getSelectors();

user.selectors.ts

export const userFeatureSelector = createFeatureSelector<UserState>('users');

export const getAllUsers = createSelector(
  userFeatureSelector,
  selectAll
);

...

ps ：如您所见，用户列表已分页，因此我的 angular 应用程序只有部分数据

Answer 1

您可以通过在功能状态中设置两个不同的状态来分离每个用户：

 export interface IUsersFeatureState{
  userSeller: IUserSellerState;
  userBuyer: IUserBuyerState;
 }

然后你可以有 2 个不同的减速器：

 export const reducers: ActionReducerMap<IUsersFeatureState> = {
  userSeller: UserSellerReducer,
  userBuyer: UserBuyerReducer
 }

每个减速器，你可以有不同的动作来加载 userSeller 和 userBuyer：

 export interface IUserSellerState {
  loaded: boolean,
  loading: boolean,
  userSeller: UserSellerModel
 }

 export interface IUserBuyerState{
  loaded: boolean,
  loading: boolean,
  userBuyer: UserBuyerModel
 }

 export const initialState: IUserSellerState ={ 
  loaded: false,
  loading: false,
  userSeller: null
 }   

  on(userSellerActionTypes.loadSellerUsers, (state, res) => ({
   ...state,
   loaded: false,
   loading: true
   userSeller: res
   })),

   on(userBuyerActionTypes.loadBuyerUsers, (state, res) => ({
   ...state,
   loaded: false,
   loading: true
   userBuyer: res
   })),

您也可以通过效果 class 控制从 API 的提取。对于store模块，你可以像下面这样注册reducer：

 StoreModule.forFeature('UsersFeature', reducers),

对于选择器，您可以有 2 个选择器，每个选择器从两个不同的状态切片数据。

  export const getUserFeatureState = 
   createFeatureSelector<IUsersFeatureState>('userFeature');
  
  export getUserSellerDetails = (state: IUserSellerState ) => 
  state.userSeller

同一州具有不同过滤器的多个列表 - NGRX 11 ANGULAR 11

Multiple list with different filter for the same State - NGRX 11 ANGULAR 11

ngrx

angular