Angular 14 NGRX Selector issue

So in my basket store you can see that I have 5 items 2 have an id 0f 4.

in my reducer, if I use:

 on(getBasket, (state, { id }) =>  state.filter((photo) => photo.id !== id)

this works as far as it goes in that the item in the basket will be removed which is fine if I only have 1 item of a particular id in the basket otherwise in this scenario the above will remove 2 entries from the basket. So to only remove 1 I need to introduce a selector to obtain the first index position for id 4 in this case (I dont care which one is removed).

So I have attempted to write:

export const basketPosition = createSelector(
  ((state: Array<Photo>, { id }: any) => { return state.indexOf(id) })
  )

Where state will be basket, and the id would be 4. However The whole statement red lines and I cannot see what is wrong with that statement. it just keeps stating:

> Source has 1 element(s) but target requires 3.

How are you providing state and id to the selector basketPosition...? createSelector() needs some State in order to select something from it, giving your example, it could be like the following:

export interface Things {
  basket: Basket[];
  selectedPhotos: Photos[];  
}

// selecting a specific data from the state
export const selectBasket = (state: Things) => state.basket;
export const selectPhotos = (state: Things) => state.selectedPhotos;


//from `selectPhotos` data array, return the first element
export const selectOnePhoto = createSelector(selectPhotos, (photos: Photos[]) => photos[0]);

//from the selectBasket data array, return all elements
export const selectAllItems = createSelector(selectBasket, (basket) => basket);

If you require to pass an argument to a selector, you can provide one (or many) like the following:

export const selectItemById = (id: string) = createSelector(
  selectBasket,
  (basket) => {
   // ... some logic here...   
   return basket.find(b => b.id === id);
  }
)

// calling it from a component

item$!: Observable<Item | undefined>;

ngOnInit(): void {
  this.item$ = this.store.select(selectBasket('someId'));
}

Ok, Took me a while but I have figured out how to remove a single item from my basket when I have multiple of the same item.

So I create an action:

export const removeFromBasket = createAction('[Basket Component] removeFromBasket', props<{ id: number }>());

then I create a reducer:

on(removeFromBasket, (state, { id }) => {
    const basketArray = [...state];
    basketArray.splice(state.findIndex(tt => tt.id === id), 1);
    return basketArray;
    }
  ),

then in my component I call the reducer :

RemoveFromBasket(photo: Photo) {
    this.basketStore.dispatch(removeFromBasket({ id :photo.id }));
  }