5

下面的代码片段有什么作用?它取自这个文件

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);
4

2 回答 2

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.
 **/

例如在 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 的主要目的是提供将选择器组合在一起的能力。

通过使用这个组合特性,我们可以让 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]);
});
于 2017-06-29T02:01:51.453 回答
1

是的,可能会有性能提升。如果fromCollection.getLoading计算成本很高,重新选择将避免无用的重新计算,直到getCollectionState不断返回相同的值。

于 2017-06-24T22:36:32.737 回答