我无法从我的实体中删除项目，因为它保存了操作类型

Question

我正在开发 angular 8，并将 "favorites" 添加到我的 ngrx 商店，我可以添加它们 select 它们没问题，但是我的删除操作失败了，因为（我认为）动作的类型被包含在项目中

这就是我创建实体和 store reducer 的方式：

export const adapter:EntityAdapter<Favorite>= createEntityAdapter<Favorite>();

export interface FavoriteState extends EntityState<Favorite> {}

export const selectors = adapter.getSelectors();

export class Favorite {
    id: number;
    username: string;
}

然后我创建了动作：

export const addFavoriteAction = createAction('[Favorite] Add Favorite', props<Favorite>());
export const getFavoritesAction = createAction('[Favorite] Get Favorite');
export const removeFavoritesAction = createAction('[Favorite] Delete Favorite', props<Favorite>());

我的减速器非常标准（我使用的是实体适配器）

// And finally, the reducer
const favoritesReducer = createReducer(initialState,
    on(getFavoritesAction, state => state),
    on(removeFavoritesAction, (state: FavoriteState, favorite: Favorite) => {
        return adapter.removeOne(favorite.username, state);
    }),
    on(addFavoriteAction, (state: FavoriteState, favorite: Favorite) => {
        return adapter.addOne(favorite, state);
    })
);

当我添加收藏夹时，用这个：

  addFavorite(username, id) {
    const newFavorite = new Favorite();
    newFavorite.username = username;
    newFavorite.id = id;

    this.favoriteStore.dispatch(addFavoriteAction(newFavorite));
  }

控制台显示我的实体添加正确，但是我的状态是这样的

state: {
entities:
233907: {username: "astaxie", id: 233907, type: "[Favorite] Add Favorite"}
10752102: {username: "libenhe", id: 10752102, type: "[Favorite] Add Favorite"}
20162049: {username: "testerSunshine", id: 20162049, type: "[Favorite] Add Favorite"}
21636478: {username: "TestLeafPages", id: 21636478, type: "[Favorite] Add Favorite"}
ids: (4) [233907, 10752102, 20162049, 21636478]
}

如您所见，状态中包含带有操作字符串的 "type" 属性（我不确定这是否正确）

所以当我尝试删除它时，使用我的函数：

 removeFavorite(selected: Favorite) {
    this.favoriteStore.dispatch(removeFavoritesAction(selected));
  }

它发送到reducer的"favorite"是这样输出的：

action {
   id: 21636478
   type: "[Favorite] Delete Favorite"
   username: "TestLeafPages"
}

据我了解，适配器中的 removeOne 将尝试在商店的实体数组中找到它，但由于操作字符串不同，它不会找到它，因此它不会删除它。

我做错了什么？

Answer 1

您需要像这样更改您的操作：

export const addFavoriteAction = createAction('[Favorite] Add Favorite', props<{favorite: Favorite}>());

你的减速器是这样的：

on(addFavoriteAction, (state: FavoriteState, { favorite } : { favorite : Favorite }) => {
        return adapter.addOne(favorite, state);
})

最后，要使用您的操作，请使用对象分派它们：this.favoriteStore.dispatch(addFavoriteAction({ favorite: myFav })

我无法从我的实体中删除项目，因为它保存了操作类型

I can't remove an item from my entity, because it saves the action type

entity

store

adapter

ngrx

angular