Hello, I have this long lasting question. Is it ok to use one selector as a "prop source" of another
e.g
selector 1 : selectBookById = createSelector(selectBooks, (books, props) => books.filter(book => book.id === props.id))
selector 2 : selectActiveId = crateSelector(selectActiveIdState, (activeIdState) => activeIdState.activeId)
and now
selectActiveBook = createSelector(
booksStateAndActiveIdState => booksStateAndActiveIdState,
selectActiveId,
(booksStateAndActiveIdState, activeID) => selectActiveId(booksStateAndActiveIdState, {id: activeId})
)Elaboration: I find myself often duplicating selectors for specific entity by its ID and also i have selectors for "active" entities e.g. ones that are in url param in given moment
I would like to write ...byId selectors and latter only enhance them with active
is the way above valid ?
Does anyone know how or have links for using StoryBook & Angular with NGRX Store ?
I have followed the StoryBook tutorial but still cannot figure out how to use StoryBook with NGRX Store. I can use StoryBook with Angular Dumb Components fine. I need to be able to set the NGRX Store State for the stories of my Nested components.
eg. In my SmartComponent I have:
this.accountDebtor$ = this.coreStore.select( coreSelector.selectAccountDebtorState );
In the Story I have:
export const LoadedAccountPanel = (args) => ({
component: AccountComponent,
props: args,
});
LoadedAccountPanel.args = {
panelData: {},
accountDebtor$: <-- How do I set the State so this gets set using the store ???,
};Hi all,
Anyone see errors like this after running:nx update && then npm run audit ??
npm ERR! code ELOCKVERIFY
npm ERR! Errors were found in your package-lock.json, run npm install to fix them.
npm ERR! Invalid: lock file's @ngrx/schematics@10.1.0 does not satisfy @ngrx/schematics@10.0.0
npm ERR! Invalid: lock file's @ngrx/store-devtools@10.1.0 does not satisfy @ngrx/store-devtools@10.0.0The actual app works fine - using nx serve
I want to fix the errors so I can run my Jenkins job.
Any advice?
Everytime it changes, it dispatches an action, however, one scroll completly fills my inspector with only that action, is there a way to exclude this specific action from the in browser redux inspector?
5 replies
Error: node_modules/@ngrx/effects/src/concat_latest_from.d.ts:2:145 - error TS2574: A rest element type must be an array type.
export declare function concatLatestFrom<T extends Observable<unknown>[], V>(observablesFactory: (value: V) => [...T]): OperatorFunction<V, [V, ...{
[i in keyof T]: ObservedValueOf<T[i]>;
}]>;installed : "@ngrx/effects": "11.1.1", does anybody know what is going on ?
still active community here? question about entityAdapter,
it seems like deeper object key data is overwritten completely instead of concat, what i would expect.
if this is my entity:
'93dd0fd6-fd8c-4c70-a213-cb76d1ef6eda': {
guid: '93dd0fd6-fd8c-4c70-a213-cb76d1ef6eda',
languageSettings: {
DE: {
slug: 'velows',
},
EN: {
slug: 'velows',
},
FR: {
slug: 'velows',
},
NL: {
slug: 'veluwe',
},
},
},and i update the object with a specific language for content like
```
'93dd0fd6-fd8c-4c70-a213-cb76d1ef6eda': {
guid: '93dd0fd6-fd8c-4c70-a213-cb76d1ef6eda',
languageSettings: {
EN: {
slug: 'velows',
title: 'Testing EN',
content: 'Test',
},
},
},How do i concat with the entityAdapter?
^ basically this exact thing is happening to me.
Unrelated selectors are firing when I change a different slice of the app state...
export const selectConnectedAccount = (state: AppState) => state.login ngOnInit() {
this.store
.pipe(
map(state => {
console.log('mapping state header: ', state)
return selectConnectedAccount(state);
}),
filter(val => val !== undefined),
filter((val: any) => val.currentAccount !== undefined),
// distinctUntilChanged
)
.subscribe(
state => {
if (state.currentAccount) {
console.log('got new connected address: ', state)
this.connectedAddress = state.currentAccount;
// Uncommenting below line causes infinite loop of ngrx actions firing...
// this.store.dispatch(loadHydrants({ account: this.connectedAddress }))
console.log('got address, dispatching call for hydrants... ', this.connectedAddress)
}
else
console.log('got empty state: ', state)
}
)
}export interface AppState {
login: any;
hydrants: any;
}
i'm using angular 12 + ngrx 12.2 + router-store. i have a ItemListComponent that shows a list of items and ItemDetailsComponent that shows details about one item. if i go to the list component and get the list of all items and then from there router.navigate to the Details component e.g. /itemDetails/1 everything works fine using <div *ngIf="item$ | async as item" however, if i navigate directly to the /itemDetails/1 the item details don't show up. in my facade, i have
selectedItems$ = this.store
.pipe(select(ItemsSelectors.getSelected))
.pipe(
tap(project => {
if (!project) {
this.loadAllItems();
}
}),
filter(project => {
console.log('item: ', item);
return item !== undefined;
})
);i can see it logging the empty item before it pulls the list and the item with data after
https://www.youtube.com/watch?v=TenetyDn4XM&ab_channel=ApplicableProgramming
I need to subscribe to a selector observable but only get the values AFTER the subscription. Thanks
