为什么在这个 @ngrx 示例中需要重新选择 createSelector?
Why the reselect createSelector necessary in this @ngrx example?
以下代码片段的作用是什么?取自这个file.
export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
fromCollection.getLoading
只有true
和false
中的一个值,那么使用createSelector
有没有什么优化呢?
在
export const getCollectionLoaded = createSelector(getCollectionState, fromCollection.getLoaded);
export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
export const getCollectionBookIds = createSelector(getCollectionState, fromCollection.getIds);
是的,可能会有性能提升。如果 fromCollection.getLoading
计算开销很大,reselect 将避免无用的重新计算,直到 getCollectionState
保持返回相同的值。
根据示例应用的评论:
/**
* Every reducer module exports selector functions, however child reducers
* have no knowledge of the overall state tree. To make them useable, we
* need to make new selectors that wrap them.
**/
例如在 reducers/collections.ts 中,文件底部的选择器仅引用集合切片:
export const getLoaded = (state: State) => state.loaded;
export const getLoading = (state: State) => state.loading;
export const getIds = (state: State) => state.ids;
这些集合选择器不能与 state.select() 一起使用,因为 state.select 需要与整个 AppState 一起使用。因此在 reducers/index.ts 中,选择器随后被另一个选择器包裹,这样它就可以与整个 AppState 一起工作:
export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
回到你的问题:为什么需要为此使用reselect。在这种情况下,重新选择不提供任何优化。所以reselect的主要目的是提供了组合选择器的能力。
通过使用此组合功能,我们可以使 collections.ts 只有集合切片的选择器。然后在 index.ts 中,我们可以在 AppState 级别拥有选择器。此外,我们可以让选择器在商店的不同部分工作,例如这个:
/**
* Some selector functions create joins across parts of state. This selector
* composes the search result IDs to return an array of books in the store.
*/
export const getSearchResults = createSelector(getBookEntities,
getSearchBookIds, (books, searchIds) => {
return searchIds.map(id => books[id]);
});
以下代码片段的作用是什么?取自这个file.
export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
fromCollection.getLoading
只有true
和false
中的一个值,那么使用createSelector
有没有什么优化呢?
在
export const getCollectionLoaded = createSelector(getCollectionState, fromCollection.getLoaded);
export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
export const getCollectionBookIds = createSelector(getCollectionState, fromCollection.getIds);
是的,可能会有性能提升。如果 fromCollection.getLoading
计算开销很大,reselect 将避免无用的重新计算,直到 getCollectionState
保持返回相同的值。
根据示例应用的评论:
/**
* Every reducer module exports selector functions, however child reducers
* have no knowledge of the overall state tree. To make them useable, we
* need to make new selectors that wrap them.
**/
例如在 reducers/collections.ts 中,文件底部的选择器仅引用集合切片:
export const getLoaded = (state: State) => state.loaded;
export const getLoading = (state: State) => state.loading;
export const getIds = (state: State) => state.ids;
这些集合选择器不能与 state.select() 一起使用,因为 state.select 需要与整个 AppState 一起使用。因此在 reducers/index.ts 中,选择器随后被另一个选择器包裹,这样它就可以与整个 AppState 一起工作:
export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
回到你的问题:为什么需要为此使用reselect。在这种情况下,重新选择不提供任何优化。所以reselect的主要目的是提供了组合选择器的能力。
通过使用此组合功能,我们可以使 collections.ts 只有集合切片的选择器。然后在 index.ts 中,我们可以在 AppState 级别拥有选择器。此外,我们可以让选择器在商店的不同部分工作,例如这个:
/**
* Some selector functions create joins across parts of state. This selector
* composes the search result IDs to return an array of books in the store.
*/
export const getSearchResults = createSelector(getBookEntities,
getSearchBookIds, (books, searchIds) => {
return searchIds.map(id => books[id]);
});