How to use NgRx in a composable way (without circular code dependencies on AppState, but still typesafe)? - ngrx

Question

Problem
When applying NgRx to my Angular project, I want to avoid that any NgRx selectors or Angular components
depend on a global AppState type (that would be the effective generic type T of NgRx's Store<T>)
(because allowing that would lead to a circular dependency in the source code, somewhere between
the respective component and Angular's app.module.ts).
I struggle to achive that without compromising the TypeScript typechecker or the ESLint checker.
I am currently using NgRx 15 (with Angular 15) and the ESLint #ngrx/all-requiring-type-checking plugin.
Dissatisfying Workaround
I have a work-around, with some shortcommings.
This is derived from the current NgRx tutorial,
with following three code snippets:
my-counter.ngrx.ts defines the component' state and the NgRx action(s),
reducer(s) and selector(s):
import { createAction, createReducer, createSelector, on } from '#ngrx/store';
// component's state
export interface MyCounterState { count: number }
// action(s)
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
// reducer(s)
export const counterReducer = createReducer(
<MyCounterState>{ count: 0},
on(increment, (state: MyCounterState): MyCounterState => <MyCounterState>{...state, count: state.count + 1}),
on(decrement, (state: MyCounterState): MyCounterState => <MyCounterState>{...state, count: state.count - 1}),
);
// selector(s)
const selectMyCounterState = (state: {myCounterState: MyCounterState}) => state.myCounterState;
const projectCount = (state: MyCounterState): number => state.count;
export const selectCount = createSelector(selectMyCounterState, projectCount);
app.module.ts configures NgRx for the Angular application:
#NgModule({
imports: [
StoreModule.forRoot({ myCounterState: counterReducer }, {}),
...
],
...
})
export class AppModule { }
my-counter.component.ts uses the NgRx store:
#Component(...)
export class MyCounterComponent {
count$: Observable<number>;
constructor(private store: Store<{ myCounterState: MyCounterState }>) {
this.count$ = store.select(selectCount);
}
readonly increment = () => this.store.dispatch(increment());
readonly decrement = () => this.store.dispatch(decrement());
}
Open Problems
The workaround can be polished further, e.g. by declaring and using an
interface instead of { myCounterState: MyCounterState } and a constant
instead of { myCounterState: counterReducer }, but some problems remain:
the identifiers myCounterState in { myCounterState: MyCounterState }
(required for Selectors or other places accessing the Store) and myCounterState
in { myCounterState: counterReducer } have to match magically; the TypeScript typechecker cannot guarantee that at compile time (and likewise, refactoring tools cannot consistently rename them)
this seems to be a general problem of the NgRx API (because StoreModule.forRoot(...)
is configured by NgRx Reducers, and the type of the NgRx Store is derived implicitly
from the Reducer's type signatures)
the ESLint plugin #ngrx/all-requiring-type-checking still complains about the generic
parameter in constructor(private store: Store<{ myCounterState: MyCounterState }>) (in the component's code snippet above)
and wants to see a raw constructor(private store: Store) instead
which I find a strange demand from the ESLint plugin, because Store is a
generic type, and providing the type parameter is essential for the TypeScript
typechecker to check the Selector implementations and usages at compile time
Actual Questions
As shown above, I struggle to apply NgRx in a way that is composable and typesafe and accepted by NgRx ESLint plugin
(again, composable meaning that components and selectors should be independent of any global AppState type, the generic
type parameter of Store<T>).
Is there a concise and clean pattern for that?
Or is it simply impossible with the current NgRx 15 API?

Answer 1

As you mentioned, it's hard to type this correctly because the state in the store is "constantly" changing at run-time.
I think what you're missing in the snippets is a feature selector. In my opinion, using this makes interacting with the store simpler.
// instead of this
const selectMyCounterState = (state: {myCounterState: MyCounterState}) => state.myCounterState;
// do this
const selectMyCounterState = createFeatureSelector<MyCounterState>(myCounterStateKey);
While we can still make a mistake with this, it's a good base.
Because the selector to select the feature is now typed, you can use it further to create child selectors.
And you can also drop the generic from the Store. The selector will handle all of that.
Also, some newer features like createFeature help to keep things consistent and typed. You can also do Store.forFeature(myFeature), this way you don't need to share the interface in the module.
For example, a feature comes with the base selectors to retrieve the state.
Side note, you don't need to cast the reducer as this can lead to problems.
// don't do this
on(increment, (state: MyCounterState): MyCounterState => <MyCounterState>{...state, count: state.count + 1}),
// instead do
on(increment, (state: MyCounterState): MyCounterState => ({...state, count: state.count + 1})),
Some links that might be useful:
https://timdeschryver.dev/blog/you-should-take-advantage-of-the-improved-ngrx-apis
https://timdeschryver.dev/blog/stop-misusing-typescript-type-assertions

Answer 2

'Improved Workaround' Snippets
Thanks to #timdeschryver's answer, I can get rid of the ESLint warning and can get away with exporting less implementation details from my-counter.ngrx.ts. This solves most of the problems I had.
Still unresolved is the necessity for the magic match of the Reducer key (object field name) and the FeatureSelector key (string value), but at least these can be non-public implementation details that can be kept close together in one source file.
For sake of completness, this is the pattern I am now working with, based on the NgRx tutorial, with following three code snippets:
my-counter.ngrx.ts defines the component' state and the NgRx action(s),
reducer(s) and selector(s):
import { createAction, createFeatureSelector, createReducer, createSelector, on } from '#ngrx/store';
// component's state
interface MyCounterState { count: number }
// action(s)
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
// reducer(s)
const counterReducer = createReducer(
{ count: 0},
on(increment, (state: MyCounterState): MyCounterState => ({...state, count: state.count + 1})),
on(decrement, (state: MyCounterState): MyCounterState => ({...state, count: state.count - 1})),
);
export const MY_COUNTER_APP_REDUCERS = { myCounterState: counterReducer };
// selector(s)
const selectMyCounterState = createFeatureSelector<MyCounterState>('myCounterState');
const projectCount = (state: MyCounterState): number => state.count;
export const selectCount = createSelector(selectMyCounterState, projectCount);
app.module.ts configures NgRx for the Angular application:
#NgModule({
imports: [
StoreModule.forRoot({
...MY_COUNTER_APP_REDUCERS,
// ...and more
}),
...
],
...
})
export class AppModule { }
my-counter.component.ts uses the NgRx store:
#Component(...)
export class MyCounterComponent {
count$: Observable<number>;
constructor(private store: Store) {
this.count$ = store.select(selectCount);
}
readonly increment = () => this.store.dispatch(increment());
readonly decrement = () => this.store.dispatch(decrement());
}