Ngrx: combine two selectors - ngrx

Question

I've built this IStore:
export interface IStore {
user: IUser;
sources: ISourceRedux;
}
where IUser is:
export interface IUser {
id: string;
cname: string;
sname: string;
...
}
and ISourceRedux is:
export interface ISourceRedux {
entities: { [key: string]: ISource };
ids: Array<string>;
selectedIds: Array<string>;
editingSource: ISource;
defaultId: string;
}
So, I've created these selectors:
export const getSourcesState = (state: IStore) => state.sources;
export const getSelectedIds = (sourceRdx: ISourceRedux) => sourceRdx.selectedIds;
export const getSelectedSourceIds = createSelector(getSourcesState, fromSources.getSelectedIds);
So, up to now, in order to check if a user is logged I did that:
this.store$
.select(fromRoot.getUserState)
.filter(user => user.id != null && user.logged)
.do(user => this.store$.dispatch(...))
...
Now I'm strugling for getting user information and selectedSourceIds at the same time in order to check if:
a user is logged (this.store$.select(fromRoot.getUserState)
then get all selectedSourceIds (this.store.select(fromRoot.getSelectedSourceIds))
dispatch an action
How could I get this?

Answer 1

Would it make sense to add that code to a selector:
// Selector functions
const getProductFeatureState = createFeatureSelector<ProductState>('products');
const getUserFeatureState = createFeatureSelector<UserState>('users');
export const getCurrentProduct = createSelector(
getProductFeatureState,
getUserFeatureState,
getCurrentProductId,
(state, user, currentProductId) => {
if (currentProductId === 0) {
return {
id: 0,
productName: '',
productCode: 'New',
description: 'New product from user ' + user.currentUser,
starRating: 0
};
} else {
return currentProductId ? state.products.find(p => p.id === currentProductId) : null;
}
}
);
This code is in the product.reducer file. Here I define the feature selector both for the products and for the users.
I then build a getCurrentProduct selector using both the product and user feature.

Answer 2

This is my solution:
this.store$.combineLatest(
this.store$.select(fromRoot.getUserEntity),
this.store$.select(fromRoot.getSelectedSourceIds),
(store, user, selectedSourceIds) => ({user: user, selectedSourceIds: selectedSourceIds})
)
.filter((proj) => proj.user.id != null && proj.user.logged)
.do((proj) => this.store$.dispatch({type: 'DELETE_CARDS', payload: {username: proj.user.username, tokens: proj.selectedSourceIds}}))
.take(1)
.subscribe();
I hope it's useful.

Answer 3

I created a feature selector that combines two features to accomplish this.
The feature selector for the global module:
export interface ScaffoldPartialState extends GlobalPartialState {
readonly [SCAFFOLD_FEATURE_KEY]: State;
}
which I import to the Scaffold selectors and have ScaffoldPartialState extend it.
export interface ScaffoldPartialState extends GlobalPartialState {
readonly [SCAFFOLD_FEATURE_KEY]: State;
}
The createFeatureSelector only returns the state typed so that the returned type looks like it contains only the state for this feature.
The value is the complete application state, but the type makes it looks like it's only for one module.
By one type extending the other, the resulting type provides a property for both modules.
AppState
{
module1: { ... },
module2: { ... },
module3: { ... }
}
Module2PartialState
{
module2: { ... },
}
Module2PartialState extends Module3PartialState
{
module2: { ... },
module3: { ... }
}
This way the ScaffoldPartialState feature selector works for selectors of both modules.
Example:
export const getAuthorizedMenuItems = createSelector(
getScaffoldState,
GlobalSelectors.getUserPermissions,
getMenuItems,
(_globalState, userPermissions, menuItems) =>
userPermissions ? menuItems.filter(e => userPermissions.checkAllPermissions(e.permissions)) : []
);