redux reselectは再計算を維持します

Question

私はこのアイテムのリストを持っています。これらのアイテムは、クリックするとstate.ui.clickedItemがクリックされたアイテム自体に変わります。アイテムの関連する課題レコードを計算したいと思います。 >同じ割り当て不変配列& &決して -

ユーザーがクリックした項目A：

import { createSelector } from 'reselect'; 

export const getAssignments  = state => state.assignments 
export const getClickedLineItemId = state => state.ui.clickedItem.id 

export const makeClickedLineItemAssignment =() => { 

    return createSelector(
    [ 
     getAssignments,  //Line 3 
     getClickedLineItemId, //Line 4 
    ], 
    ( 
     assignments, 
     lineItemId 
    ) => { 
     console.log("should only show if the clicked item is clicked for the first time") 
     return assignments.filter(assignment => assignment.line_item_id === lineItemId) 
    } 
) 

} 

は私がメモ-化が動作するようにを有効にしないだろうと思った：

は、だから私は、この再選択セレクタを持っていますアイテムIDの前に表示 - >アイテムの割り当てとconsole.logを計算

ユーザークリックアイテムB - >上記と同じ

>同じ割り当ての配列& &アイテムIDが前に見ていない - -

ユーザーアイテムがA（再び）をクリックするだけで、しかし、キャッシュと私が期待したものだNOにconsole.log

からそれをつかむ、>何の計算を何I getはすべてのクリックがフィルタリングとconsole.loggingを再計算することです。私の再選択コードで誰かがエラーを見ることができますか？

ありがとうございました！

Answer 1

makeClickedLineItemAssignmentに電話するたびにセレクタを再作成しているようです。それは状態を受け入れる関数を返す関数です。だから、このようにそれを使用する必要があると思います：あなたはそれを行う場合は、セレクタが正しくメモ化されていることがわかります

const selector = makeClickedLineItemAssignment(); 
selector(state); 
selector(state); 

。しかし、状態がmapStateToPropsに変更されるたびにアプリがmakeClickedLineItemAssignmentに電話している可能性があります。これは毎回異なる機能を取得することを意味します。代わりに、直接セレクタを輸出してみてください。

export const makeClickedLineItemAssignment = createSelector(
    [ 
    getAssignments,  //Line 3 
    getClickedLineItemId, //Line 4 
    ], 
    (
    assignments, 
    lineItemId 
) => { 
    console.log("should only show if the clicked item is clicked for the first time") 
    return assignments.filter(assignment => assignment.line_item_id === lineItemId) 
    } 
); 

出力：

willy@localhost:~/$ babel-node test.js 
First 
should only show if the clicked item is clicked for the first time 
Second