2017-06-30 5 views
1

私はngrx/exampleレポに行きますが、私はreselectの使用法を理解していません。Angular ngrxの理解の再選択

私の理解のために、createSelector関数は、同じパラメータを受け入れる2つの関数を取ります。例えば

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

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

両方の関数は、パラメータとして全体状態を取っています。

しかし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) 

上記の例では、彼らが異なるのparamsを取っている、最初は全体の状態と第2のレイアウト状態を取るようです。

どのように動作していますか?

+0

州の作成と管理の最善の方法を示す[** demo app **](https://github.com/aravindfz/ngrx-store-demo)を見てください。 – Aravind

答えて

2

複数のファイルにまたがっているため、混乱します。我々が持っている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); 

はここでさらに、私は最後のパラメータによって何を意味するかの内訳です。

+0

しかし、それはどのように例再選択作品から。この例では、2番目のパラメータは最初のパラメータの結果を取得しません。そのドキュメント(https://github.com/reactjs/reselect#createselectorinputselectors--inputselectors-resultfunc)から – undefined

+0

それは言う: createSelector(... inputSelectors | [inputSelectors]、resultFunc) は、一の以上のセレクタをとり、セレクタの配列を参照してその値を計算し、引数としてresultFuncに渡します。 つまり、セレクタの最初のセットは、その値を最後のパラメータであるresultFuncに渡します。この場合、getLayoutStateはinputSelectorで、最後の太矢印の関数はresultFuncです。 – seescode

+0

ありがとう!!!!!今それは明らかです。 – undefined

関連する問題