Potential breaking change in `@ngrx/store` 12.5.0

[nicholas-ochoa]

It appears that a small change was made based on pull request #3158 that changes the behavior from the previous version (12.4) with the store.select() types. There was no mention of this change in the CHANGELOG.md file for 12.5, however my application was broken until I rolled back to 12.4 and did some digging on what changed.

The code I'm currently using (which works today on 12.4):

loadPalletTypesList$ = this.store.select(fromList.selectLoadPalletTypesList);

Error message received after upgrading to 12.5:

Error: projects/go/src/app/load/services/load.service.ts:45:44 - error TS2769: No overload matches this call.
  Overload 1 of 9, '(mapFn: (state: Record<string, unknown>) => DataList): Observable<DataList>', gave the following error.
    Argument of type 'MemoizedSelector<AppState, DataList, DefaultProjectorFn<DataList>>' is not assignable to parameter of type '(state: Record<string, unknown>) => DataList'.
  Overload 2 of 9, '(key: string): Observable<unknown>', gave the following error.
    Argument of type 'MemoizedSelector<AppState, DataList, DefaultProjectorFn<DataList>>' is not assignable to parameter of type 'string'.

45   loadPalletTypesList$ = this.store.select(fromList.selectLoadPalletTypesList);

It's not a huge issue, but I think the change should be mentioned in the CHANGELOG.md as a potential problem.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

Angular 12.5
NgRx 12.5
Node 14.17.5
TS: 4.4.4

Other information:

I would be willing to submit a PR to fix this issue

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[X] No

[brandonroberts]

Thanks @nicholas-ochoa. It wasn't meant to be a breaking change. We'll take a look and see what the further impact is and note it in the CHANGELOG as needed.

[timdeschryver]

@nicholas-ochoa by any chance, do you got a reproduction of this behavior?

[nicholas-ochoa]

I can't seem to get the ngrx dependencies to update past 12.4.0 on StackBlitz

[timdeschryver]

@nicholas-ochoa it's already great if it's 12.4

[bryantlikes]

Basically this documentation is now wrong: https://ngrx.io/guide/store/selectors#using-store-without-type-generic

So if you're following that advice and using just plain Store instead of Store<MyState> then it now breaks because the base is now Store<T = Record<string, unknown>> instead of Store<T = object>.

EDIT: It only happens if you're using the same Store for multiple states. So if I'm using a selector from the root state plus a feature selector, then it can no longer figure out what type it is so it defaults to that Record<string, unknown> type.

[bryantlikes]

BTW - on a side note, is the ngrx website documentation completely broken or is it just me? Every time I click a menu item it goes back to the home and I have to hit back to see the documentation I selected.

[nicholas-ochoa]

@bryantlikes I've noticed that the past couple of days. I thought it was just me 😄

[bryantlikes]

I'm not a big StackBlitz user, but if you can fork this and get it to use 12.5 I think this will show the error.

https://stackblitz.com/edit/angular-ivy-7tusfw?file=src/app/app.component.ts

[timdeschryver]

Thanks for the help.
It seems like StackBlitz is acting weird, but I can't reproduce it.
Here's what I tried locally and via TS Playground

[bryantlikes]

Ok, I figured it out. I had some older feature selectors that where using the root state. So if you have some feature selectors that use that while other don't you get the error.

export const selectFeatureAState = createFeatureSelector<RootState, FeatureA>('featureA');
export const selectTitle = createSelector(selectFeatureAState, state => state.title);
export const selectFeatureBState = createFeatureSelector<FeatureB>('featureB');
export const selectCount = createSelector(selectFeatureBState, state => state.count);

Then if you try to use the untyped Store you get the error:

  title$ = this.store.select(selectTitle);
  count$ = this.store.select(selectCount);

  constructor(protected store: Store) { }

Overload 1 of 9, '(mapFn: (state: Record<string, unknown>) => string): Observable', gave the following error.
Argument of type 'MemoizedSelector<RootState, string, DefaultProjectorFn>' is not assignable to parameter of type '(state: Record<string, unknown>) => string'.
Types of parameters 'state' and 'state' are incompatible.
Type 'Record<string, unknown>' is missing the following properties from type 'RootState': featureA, appTitle
Overload 2 of 9, '(key: string): Observable', gave the following error.
Argument of type 'MemoizedSelector<RootState, string, DefaultProjectorFn>' is not assignable to parameter of type 'string'.ts(2769)

Edit: Also notice that the same issue happens if you combine a feature selector that uses the feature state and the createFeature function since that also uses the RootState for the feature selector.

@timdeschryver Does this change break your example here: https://timdeschryver.dev/blog/sharing-data-between-modules-is-peanuts#router-selectors ? The getFamilyMembersGroceries in particular. Or if you update your code to use createFeature.

[timdeschryver]

@bryantlikes thanks. I was able to reproduce this now.
But the same issue arises when I'm reverting back to v12.4

[evanfuture]

Yeah, I've had this in other projects before, but the error was in the selectors file rather than the facade/component. It's unclear to me in your examples, @timdeschryver where the root state is imported from, or what it's typed when only using feature modules. In any case, if anyone can share a better way to use, for example:

export const { selectRouteParams } = getRouterSelectors();
export const selectCurrentRecordId = createSelector(selectRouteParams, state => state.recordId);

// selectAllCurrentRecords is an entity.selectAll
export const selectCurrentRecord = createSelector(selectAllCurrentRecords, selectCurrentRecordId, (all, recordId) => {
  return all.find(r => r.id === recordId);
});

  currentRecord$ = this.store.select(selectors.selectCurrentRecord);

In 12.4, the store.select works fine. In 12.5, it throws the error.