The entity passed to the `selectId` implementation returned undefined. You should probably provide your own `selectId` implementation

Question

https://github.com/rokudo5262/phone this is my project
i want to load the list of brands in smart table but get the warning
i try to fix but the warning is still there please help
Brands-features.selector.ts

import { createFeatureSelector } from '@ngrx/store';
import { State, FeatureKey } from '../reducers';

export const selectBrandsState = createFeatureSelector<State>(FeatureKey);

Brands.selector.ts

import { createSelector } from '@ngrx/store';
import { selectBrandsState } from './brands-features.selector';
import { BrandsReducer } from '../reducers';
import { brandAdapter } from '../states/brands.state';

export const selectBrandEntitiesState = createSelector(
  selectBrandsState,
  state => state[BrandsReducer.brandsFeatureKey],
);

export const {
  selectIds: selectBrandIds,
  selectEntities: selectBrandEntities,
  selectAll: selectAllBrands,
  selectTotal: selectTotalBrands,
} = brandAdapter.getSelectors(selectBrandEntitiesState);

export const BrandSelectors = {
  selectBrandEntitiesState,
  selectBrandIds,
  selectBrandEntities,
  selectAllBrands,
  selectTotalBrands,
};
export const selectCurrentBrand = (brand_id) => createSelector(
  selectBrandEntities,
  (brand) => brand[brand_id],
)

selector/index.ts

export * from './brands-features.selector';
import * as BrandsSelector from './brands.selector';

export {
    BrandsSelector,
};

Brand.reducer.ts

import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { IBrand } from '../../../@core/data/brands';

export interface BrandsState extends EntityState<IBrand> {
    selectedBrandID: number | string | null;
}
export const brandAdapter: EntityAdapter<IBrand> = createEntityAdapter<IBrand>({
    selectId: (brand: IBrand) => brand.brand_id,
    sortComparer: null,
});

export const brandInitialState: BrandsState = brandAdapter.getInitialState({
    selectedBrandID: null,
    entities: {
        0: {},
    },
});

Answer 1

createEntityAdapter has a selectId function which expects an id field in your element.

Example:

[
    { "id": 1, "name": "Lorem ipsum 1" },
    { "id": 2, "name": "Lorem ipsum 2" }
]

But, your elements have a custom id field like this one:

[
    { "elementId": 1, "name": "Lorem ipsum 1" },
    { "elementId": 2, "name": "Lorem ipsum 2" }
]

To solve the issue, i've overwritten the selectId method from the createEntityAdapter as follows:

const elementAdapter = createEntityAdapter({
  selectId: (e) => e.elementId
});

You can find more info here: https://redux-toolkit.js.org/api/createEntityAdapter

Answer 2

I found the problem, turn out the problem is a '''brand_id''' in my Brand Table, entity.Property(e => e.BrandId).HasColumnName("brand_id"); and brand_id in my Ibrand interface not in the code. so i change everything to brandCode and the warning is gone.

            modelBuilder.Entity<Brands>(entity =>
            {
                entity.HasKey(e => e.BrandCode)

                entity.Property(e => e.BrandCode).HasColumnName("brandCode");

                entity.Property(e => e.BrandName)
                    .HasColumnName("brandName")
                    .HasMaxLength(255);

                entity.Property(e => e.CreatedBy)
                    .HasColumnName("createdBy")
                    .HasMaxLength(255);

                entity.Property(e => e.CreatedDateTime)
                    .HasColumnName("createdDateTime")
                    .HasColumnType("datetime");

                entity.Property(e => e.Deleted).HasColumnName("deleted");

                entity.Property(e => e.Remark)
                    .HasColumnName("remark")
                    .HasMaxLength(255);

                entity.Property(e => e.Status)
                    .HasColumnName("status")
                    .HasMaxLength(255);

                entity.Property(e => e.UpdatedDateTime)
                    .HasColumnName("updatedDateTime")
                    .HasColumnType("datetime");

                entity.Property(e => e.Updatedby)
                    .HasColumnName("updatedby")
                    .HasMaxLength(255);
            });

export const brandAdapter: EntityAdapter<IBrand> = createEntityAdapter<IBrand>({
    selectId: (brand: IBrand) => brand.brandCode,
    sortComparer: null,
});

export interface IBrand {
    brandCode: number;
    brandName: string;
    status: string;
    remark: string;
    deleted: boolean;
    createdBy?: string;
    createdDateTime?: Date;
    lastUpdatedBy?: string;
    lastUpdatedDateTime?: Date;
}

Answer 3

I guess the problem is in selectCurrentBrand, might you share how you use it?

export const selectCurrentBrand = (brand_id) => createSelector(
  selectBrandEntities,
  (brand) => brand[brand_id],
)

if you do it like this.store.select(selectCurrentBrand, 123), then the right way is

export const selectCurrentBrand = createSelector(
  selectBrandEntities,
  (brand, brand_id) => brand[brand_id],
)

the selector

this.roomgroup$ = this.store.pipe(select(RoomGroupSelectors.selectCurrentRoomGroup, this.id$))