NGRX/entity：自定义选择器，获取具有特定键 === 值的实体

Question

I believe this question has been asked in so few words, but none of the solutions provided work for my case (perhaps syntax deprecation, perhaps my implementation does something wrong)

I am trying to select all GameInfo from my state which has a certain value in it's family property. Whatever solution I try when writing a custom, parameterized selector, I get an error like:

No overload matches this call.
  The last overload gave the following error.
    Argument of type 'MemoizedSelector<object, Dictionary<GameInfo>, DefaultProjectorFn<Dictionary<GameInfo>>>' is not assignable to parameter of type '[SelectorWithProps<unknown, unknown, GameInfo[]>, SelectorWithProps<unknown, unknown, unknown>, SelectorWithProps<unknown, unknown, unknown>, SelectorWithProps<unknown, unknown, unknown>, SelectorWithProps<...>, SelectorWithProps<...>, SelectorWithProps<...>, SelectorWithProps<...>]'.ts(2769)
selector.d.ts(177, 25): The last overload is declared here.
const selectGameInfoEntities: MemoizedSelector<object, Dictionary<GameInfo>, DefaultProjectorFn<Dictionary<GameInfo>>>

my selector code

export const selectGameInfoEntities = createSelector(
    fromGameInfo.getGameInfoState,
    fromGameInfo.selectGameInfoEntities
)

export const getFamily = (family: string) => 
    // how do we get the entities from the state 
    createSelector(
        selectGameInfoEntities, 
        (entities: GameInfo[]) => {
            entities.filter((item: GameInfo) => item.family === family)}
    );

game-info.reducer.ts

import * as actions from '../actions/game-info.actions';
import { EntityState, createEntityAdapter } from '@ngrx/entity';
import { createFeatureSelector, createReducer, on } from '@ngrx/store';
import { GameInfo } from 'src/app/models/game-info.model';


export const gameInfoAdapter = createEntityAdapter<GameInfo>();

export interface State extends EntityState<GameInfo> { }

const defaultGameInfo = {
    ids: [],
    entities : {}
}
export const getGameInfoState = createFeatureSelector<State>('gameInfo');

export const {
    selectIds,
    selectEntities,
    selectAll,
    selectTotal,
} = gameInfoAdapter.getSelectors(getGameInfoState);

// select the array of GameInfo ids
export const selectGameInfoIds = selectIds;
 
// select the dictionary of GameInfo entities
export const selectGameInfoEntities = selectEntities;
 
// select the array of GameInfo
export const selectAllGameInfos = selectAll;
 
// select the total GameInfo count
export const selectGameInfoTotal = selectTotal;

export const initialState: State = gameInfoAdapter.getInitialState(defaultGameInfo);

export const GameInfoReducer = createReducer(
  initialState,
    on(actions.readGameInfoSuccess, (state, {gameInfo}) => {return gameInfoAdapter.addMany(gameInfo, state)}),
  on(actions.createGameInfo, (state, action) => {return gameInfoAdapter.addOne(action, state)}),
  on(actions.deleteGameInfo, (state, action) => {return gameInfoAdapter.removeOne(action.id, state)}),
  on(actions.updateGameInfo, (state, action) => {return gameInfoAdapter.updateOne({id : action.id, changes : action.data}, state)})
);

Currently, this error appears when I hover over the selectGameInfoEntities parameter for the createSelector method. However, I have tried more straightforward approaches to accessing the state, and get similar errors about "no overload matching this call"

I was hoping that perhaps someone could simply explain how selectors work within the context of entity. I am a little confused why I need this first selector argument when I already am calling selector on an observable of the store? like this:

constructor(
  private gameInfoStore: Store<fromGameInfo.GameInfoState>,
  private gameStore : Store<fromGame.State>,
  private router : Router,
  private route : ActivatedRoute) { }

ngOnInit(): void {
  this.gameInfo$ = this.gameInfoStore.select(fromGame.selectAll)
  this.gameInfoStore.dispatch( gameInfoActions.readGameInfo() );

  this.game_categories$ = this.gameInfoStore.pipe(select(getFamily("category")))
  this.game_creators$ =  this.gameInfoStore.pipe(select(getFamily("creator")))
  this.game_platforms$ =  this.gameInfoStore.pipe(select(getFamily("platform")))
}

I imagine this could also be a mistake, but the error is coming from my custom selector definition

Answer 1

This was a problem where we were really just overthinking/ over implementing.

in our game-info.selector.ts :

export const selectAllGameInfos = createSelector(
    fromGameInfo.getGameInfoState,
    fromGameInfo.selectAllGameInfos
)

export const getFamily = (family: string) => 
    createSelector(
        selectAllGameInfos, 
        (entities : GameInfo[]) => {
            return entities.filter((gameInfo : GameInfo) => gameInfo.family === family)
});

when this suffices:

export const getFamily = (family: string) => 
    createSelector(
        fromGameInfo.selectAllGameInfos, 
        (entities : GameInfo[]) => {
            return entities.filter((gameInfo : GameInfo) => gameInfo.family === family)
});

We redefined the selectAllGameInfos selector in the selector file, to take the feature selector selected substate as a first argument, because of some code we had seen in the NGRX entity documentation. This wasn't the right thing to do, but I was merely grasping at straws out of frustration.

Hopefully, a lesson for people struggling with NGRX, selectors and entity: keep it simple silly- work with the selectors that entityAdapter gives you- thats what they are meant for!