英文:
Composing Selectors inside "Extra Selectors" throws: Cannot access 'selectFirstFilteredBook' before initialization
问题
在兄弟级别的选择器中使用会引发错误Cannot access 'selectFirstFilteredBook' before initialization。这是否是预期行为，我是否遗漏了什么，还是这是extraSelectors的限制？
这里有一个示例：
export const booksFeature = createFeature({
name: 'books',
reducer: createReducer(
initialState,
on(BookListPageActions.search, (state, action) => ({
...state,
query: action.query,
})),
),
extraSelectors: ({ selectQuery, selectBooks }) => ({
selectFilteredBooks: createSelector(
selectQuery,
selectBooks,
(query, books) => books.filter(book => book.title.includes(query)),
),
selectFirstFilteredBook: createSelector( //<<<--- 抛出错误的选择器
selectFilteredBooks,
(filteredBooks) => filteredBooks[0],
),
}),
});
如果这不是受支持的行为，我唯一看到的解决方案就是在selectFirstFilteredBook中复制selectFilteredBooks的逻辑，但这样做相当丑陋。
而且，如果描述的行为不可行，那么创建一个像样的视图模型选择器就变得不可能，这是一个无法接受的问题。
是否有人有解决方案或变通方法？
英文:
Using a selector inside it sibling throws an error Cannot access 'selectFirstFilteredBook' before initialization. Is it intended behavior and I am missing something or is it a limitation of extraSelectors?
Here is an example:
export const booksFeature = createFeature({
name: 'books',
reducer: createReducer(
initialState,
on(BookListPageActions.search, (state, action) => ({
...state,
query: action.query,
})),
),
extraSelectors: ({ selectQuery, selectBooks }) => ({
selectFilteredBooks: createSelector(
selectQuery,
selectBooks,
(query, books) => books.filter(book => book.title.includes(query)),
),
selectFirstFilteredBook: createSelector( //<<<--- Selector that throws error
selectFilteredBooks,
(filteredBooks) => filteredBooks[0],
),
}),
});`
If its a not supported behavior, the only solution I see would be to duplicate selectFilteredBooks logic inside selectFirstFilteredBook and that´s just ugly.
Moreover, if described behaviour is not possible it makes impossible creating a decent View Model selector which is a deal breaker.
Does anyone have a solution/workaround?
答案1
得分: 2
我希望我能帮助你。而不是返回具有所有选择器的对象，你可以将选择器保存在一些变量中，然后返回对象。
在你的示例中：
extraSelectors: ({ selectQuery, selectBooks }) => {
const selectFilteredBooks = createSelector(
selectQuery,
selectBooks,
(query, books) => books.filter(book => book.title.includes(query))
);
const selectFirstFilteredBook = createSelector(
selectFilteredBooks,
(filteredBooks) => filteredBooks[0],
);
return {
selectFilteredBooks,
selectFirstFilteredBook
}
}
请让我知道这是否回答了你的问题！
英文:
I hope I can help you. Instead of returning the object with all selectors you can save the selectors in some variables and return the object afterwards.
In your example:
extraSelectors: ({ selectQuery, selectBooks }) => {
const selectFilteredBooks = createSelector(
selectQuery,
selectBooks,
(query, books) => books.filter(book => book.title.includes(query))
);
const selectFirstFilteredBook = createSelector(
selectFilteredBooks,
(filteredBooks) => filteredBooks[0],
);
return {
selectFilteredBooks,
selectFirstFilteredBook
}
}
Please let me know if it answers your question!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论