Apologies if this is unclear, there might be a fundamental aspect that I am overlooking, but here is my current issue:
I am fetching a list of items from the backend, similar to:
interface Item { id: number; userId: number; categoryId: number; }Additionally, I have lists of users and categories stored in my application:
interface User { id: number; name: string; } interface Category { id: number; name: string; }I aim to create an ItemVM view model by utilizing these three classes, which will hold the processed data:
interface ItemVM { id: number; userName: string; categoryName: string; }
My understanding suggests that I should implement a selector like this:
// map userId and categoryId to user.name and category.name
export const selectItemViewModel = createSelector(
// retrieve users, categories, and items
selectUsers,
selectCategories,
selectItems,
// map them accordingly
(users, categories, items) => {
return items.map(i => <ItemVM>{
id: i.id,
userName: users.find(u => u.id === i.userId).name,
categoryName: categories.find(c => c.id === i.categoryId).name,
});
}
);
However, my confusion lies in the fact that since this selector is not observable, how can I ensure that users, categories, and items are already loaded when this function is invoked?