javascript - Angular ngrx例子理解reselect

Question

我检查了 ngrx/example repo，我不明白reselect的用法。

据我了解，createSelector 函数采用两个接受相同参数的函数。

例如:

const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent

const taxSelector = createSelector(
  subtotalSelector,
  taxPercentSelector,
  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
)

这两个函数都将whole 状态作为参数。

但在 ngrx 示例中 -

export const getLayoutState = (state: State) => state.layout;
export const getShowSidenav = (state: State) => state.showSidenav;
export const getShowSidenav = createSelector(getLayoutState, fromLayout.getShowSidenav);

store.select(fromRoot.getShowSidenav)

在上面的示例中，它们似乎采用了不同的参数，第一个采用整个状态，第二个采用布局状态。

它是如何工作的？

Answer 1

这很令人困惑，因为它分布在多个文件中。

在 layout.ts 内部我们有:

export const getShowSidenav = (state: State) => state.showSidenav;

然后在 index.ts 里面我们有:

export const getLayoutState = (state: State) => state.layout;
export const getShowSidenav = createSelector(getLayoutState, 
   fromLayout.getShowSidenav);

因此，如果我们只在一个文件中完成所有操作，它会如下所示:

// getLayoutState works at the AppState level
export const getLayoutState = (state: State) => state.layout;

export const getShowSidenav = createSelector(getLayoutState, 
   // This fat arrow function operates only on what getLayoutState gives us
   (layoutState: LayoutState) => layoutState.showSidenav);

在此示例中，当您使用 createSelector 时，第一个参数采用 getLayoutState，它从整个 AppState 返回布局切片。然后将该值发送到 createSelector 的最终参数。

这里是我所说的最终参数的进一步分割:

// getA values are passed to the final function as a
export const getSomething = createSelector(getA, 
   (a) => a);

// getA, getB values are passed to the final function as a, b
export const getSomething = createSelector(getA, getB, 
   (a, b) => a + b);

// getA, getB, getC values are passed to the final function as a, b, c
export const getSomething = createSelector(getA, getB, getC 
   (a, b, c) => a + b + c);

在所有这些情况下，始终是函数的最终参数将所有先前的选择器作为参数。