2

当使用 reselect 和来自 ngrx 的 store.select() 时，我试图将我的头脑围绕在引擎盖下发生的事情。

我知道 select() 方法希望您从要返回的状态返回该片段。例如：

store.select(state => state.articles.isLoading);

使用 Reselect 它会是这样的：

// articles.reducer
const getIsLoading = state => state.isLoading

// root.ts
const getArticlesState = state => state.articles;
const getIsLoading = createSelector(getArticlesState, fromArticles.getIsLoading)

//component.ts
store.select(fromRoot.getIsLoading)

我试图了解最后一块发生了什么：

store.select(fromRoot.getIsLoading)

fromRoot.getIsLoading返回一个值还是一个函数？

4

2 回答 2

4

从重新选择文档：

选择器是有效的。除非其中一个参数发生变化，否则不会重新计算选择器

此外，您应该阅读：https ://github.com/reactjs/reselect#motivation-for-memoized-selectors

也就是说，reselect使用内部调用的过程memoization。所以发生的事情是它保存了你的选择器的输出，并且每次触发选择器时，它都会检查传递给选择器的参数是否相同，如果相同，reselect则只返回缓存的结果，而不是通过和再次计算您的数据。

这就是为什么如果你规范化你的数据然后需要用选择器组合它们，这个库真的很有趣。

此外，由于选择器组成的数组/对象在reselect返回缓存值时不会更改它们的引用，Angular 可以使用该信息并避免触发重绘。当然，这比在更新商店时重新绘制所有内容要快。

于 2017-07-29T10:21:14.003 回答
0

选择器getIsLoading返回一个值。它的价值来自哪里，这一点很重要。

选择器保持缓存它返回的最后一个值。此外，它会跟踪作为其变换函数参数的存储切片是否更改。

如果 store 发生变化，它会重新运行 transform 函数，缓存它得到的值并返回它。

如果存储没有改变，它将直接返回缓存值。

于 2017-07-29T11:04:40.040 回答