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

Question

I'm working on angular 8, and adding "favorites" to my ngrx Store, I can add them and select them ok, but my delete action, is failing because (I think) the type of the action is being included on the item

This is how i created the entity and the 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;
}

Then i created the actions:

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>());

My reducer is very standard (i'm using the Entity adapter )

// 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);
    })
);

When I Add a favorite, with this:

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

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

The console shows that my entity was added correctly, but my state looks like this

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]
}

As you can see, the "type" property with the action string is being included on the state (Im not sure if this is correct or not)

So when i try to remove it, with my function:

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

the "favorite" it sends to the reducer is being output like this:

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

As i understand it, the removeOne from the adapter will try to find this in the entity array in the store, but since the action string is different, it wont find it, so its not removing it.

What am i doing wrong?

Answer 1

You'll want to change your actions like so:

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

And your reducers like so:

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

Finally, to use your actions, dispatch them with an object: this.favoriteStore.dispatch(addFavoriteAction({ favorite: myFav })