Question

我开始使用ngrx/entity软件包，可以在其中管理适配器的存储。我想使用addOne方法，但是它将项目添加到集合的末尾。我想在开始时添加一个。你能帮我吗？如何以EntityAdapter开头添加项目。

我如何创建实体适配器：

export const adapter: EntityAdapter<AssetTreeNode> = createEntityAdapter({
  selectId: (model: AssetTreeNode) => model.Id
});

Reducer看起来像这样：

export function reducer(state: AssetListState = initialState, action: AssetListAction) {
  switch (action.type) {
    (...)
    case ASSET_LIST_ADD_ITEM:
      let assetToAdd: AssetTreeNode = Object.assign({} as AssetTreeNode, 
        action.payload.asset, 
        { Id: action.payload.createdAssetId });
      return adapter.addOne(assetToAdd, state); <--- I wanna add here at the end.
    (...)
    default:
      return state;
  }
}

Answer 1

更改此行为的唯一方法是在创建适配器-docs时使用sortComparer。

export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
  sortComparer: (a: User, b: User) => a.name.localeCompare(b.name),
});

Answer 2

也许您可以将该项目放在开头并替换列表

on(addAsset, (state, { payload }) => {
  const currentList = Object.values(state.entities);
  const newList = [payload, ...currentList];
  return adapter.setAll(newList, state);
});

Answer 3

@ngrx/entity 团队没有提供适当的方法。答案之一提到使用排序比较器。但我相信使用排序比较器不是正确的方法。假设有两个点击动作，在一个动作中我们需要在下面附加项目，在另一个动作中附加在上面。在这里，我们将再次遇到同样的问题。

我遇到了同样的问题，我解决这个问题的方法是在我们想要列表顶部的项目时重建列表。

添加到实体列表的顶部

const { selectAll } = myAdapter.getSelectors();
...
...
on(MyActions.addItem, (state, { item }) =>{
    return myAdapter.setAll([item ,...selectAll(state)], { ...state})
}),

在实体列表底部添加

on(MyActions.addItem, (state, { item}) =>{
   return myAdapter.addOne(item, state)
}),

如何在ngrx / entity的集合开头添加一个项目

3 个答案:

添加到实体列表的顶部

在实体列表底部添加