为什么在这个@ngrx示例中需要重新选择createSelector?

won*_*rld 5 ngrx reselect ngrx-store

以下代码段的作用是什么?它取自此文件.

export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);

fromCollection.getLoading只有两种truefalse价值,所以才会有任何优化利用所取得的createSelector

export const getCollectionLoaded = createSelector(getCollectionState, fromCollection.getLoaded);

export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);

export const getCollectionBookIds = createSelector(getCollectionState, fromCollection.getIds);
Run Code Online (Sandbox Code Playgroud)

see*_*ode 12

根据示例应用程序的评论:

/**
 * 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.
 **/
Run Code Online (Sandbox Code Playgroud)

例如,在reducers/collections.ts中,文件底部的选择器仅引用集合切片:

export const getLoaded = (state: State) => state.loaded;
export const getLoading = (state: State) => state.loading;
export const getIds = (state: State) => state.ids;
Run Code Online (Sandbox Code Playgroud)

这些集合选择器不能与state.select()一起使用,因为state.select期望与整个AppState一起使用.因此,在reducers/index.ts中,选择器然后用另一个选择器包装,以便它可以与整个AppState一起使用:

export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);
Run Code Online (Sandbox Code Playgroud)

回到你的问题:为什么有必要使用重新选择.在这种情况下重新选择不提供任何优化.所以重新选择的主要目的是它提供了将选择器组合在一起的能力.

通过使用此组合功能,我们可以使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]);
});
Run Code Online (Sandbox Code Playgroud)