8

我开始使用ngrx/entity包，我可以在其中通过适配器管理商店。addOne我想使用一种方法，但它会将项目添加到集合的末尾。我想在开头添加一个。你能帮我解决这个问题吗？如何在开头添加项目EntityAdapter。

我如何创建实体适配器：

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

减速器看起来像这样：

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;
  }
}
4

3 回答 3

3

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

export const adapter: EntityAdapter<User> = createEntityAdapter<User>({
  sortComparer: (a: User, b: User) => a.name.localeCompare(b.name),
});
于 2018-08-24T07:25:17.103 回答
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)
}),
于 2021-07-25T22:07:21.473 回答
1

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

on(addAsset, (state, { payload }) => {
  const currentList = Object.values(state.entities);
  const newList = [payload, ...currentList];
  return adapter.setAll(newList, state);
});
于 2020-12-07T05:13:20.650 回答