mapDispatchToPropsを正しくメモする方法は？

Question

まず、ここに私のHOCです：

export default function connectField({ 
     nameProp = 'name', 
     valueProp = 'value', 
     dispatchProp = 'dispatch' 
    }: ConnectOptions) { 

    return compose(
     getContext(contextTypes), 
     connect((state, ownProps) => { 
      const path = [namespace,...getPath(ownProps),...toPath(ownProps[nameProp])]; 
      const value = getOr('', path, state); 
      return { 
       [valueProp]: value 
      }; 
     }, (dispatch,ownProps) => { // <----------- mapDispatchToProps 
      const path = [...getPath(ownProps),...toPath(ownProps[nameProp])]; 

      return { 
       [dispatchProp]: value => dispatch({type: ActionTypes.Change, payload: {path, value}}) 
      }; 

     }, (stateProps, dispatchProps, {[FIELD_PATH]: _, ...ownProps}) => { 
      return {...stateProps, ...dispatchProps, ...ownProps}; 
     }, { 
      areMergedPropsEqual: (a,b) => { 
       let eq = shallowEqual(a,b); 
       console.log('areMergedPropsEqual',a,b,eq); 
       return eq; 
      }, 
     }), 
     withContext(contextTypes, props => { 
      return {[FIELD_PATH]: [...getPath(props), props[nameProp]]}; 
     }), 
    ); 
} 

真ん中に私のmapDispatchToPropsがあります。そのため、毎回新しいアクションクリエーターが作成されているため、areMergedPropsEqualはfalseを毎回返します。

私はこのビットをmemoizeする方法を見つけ出すことができません：私は、同じ関数インスタンスを毎回取り戻すよう

value => dispatch({type: ActionTypes.Change, payload: {path, value}}) 

を。

「インスタンスごとのメモアイゼーション」に関するメモがありますが、私がここでやるべきことの頭や尾を作ることはできません。

---

明確にするために、私は関数をメモする方法を知っています。しかし、私は無限の歴史を持つ大きなキャッシュを使いたくない。不要なメモリ消費です。私はちょうどhow reselect does itのような1のキャッシュサイズが必要です。問題は、「セレクタ」をconnectFieldの中に直接作成することができないということです。つまり、1つの共有インスタンスが作成されます。つまり、すべての「接続フィールド」が同じキャッシュを共有し、互いに上書きして利益を無効にするからです。コンポーネントインスタンスごとにである必要があります。 これは、React-Reduxのconnectメソッドに固有です。セレクタを適切な場所に作成するための構文があり、インスタンスごとに1回しか実行されません。私はAPIの解読に問題があるだけです - オブジェクトを返す関数を返す関数を期待していますか？また、キーとしてpropnameを持ち、値として機能するオブジェクトですか？その関数は何を返しますか？つまり、mapDispatchToPropsオプションで受け入れられるさまざまなバリエーションのすべてについて、ドキュメントでは明確ではありません。

Answer 1

既にをお持ちの場合は、memoizeの機能を使用して、任意の機能をメモ機能に変換できます。このmemoized関数は、指定されたパラメータの戻り値を計算し、同じパラメータを提供するそれぞれの戻り値を常に返します。

あなたは、例えば、このようにそれを使用することができます：

import { memoize } from 'lodash' 

const makeChangeDispatcher = memoize((dispatch, path) => 
    value => dispatch({type: ActionTypes.Change, payload: {path, value}}) 
) 

... 

    (dispatch,ownProps) => { // <----------- mapDispatchToProps 
     const path = [...getPath(ownProps),...toPath(ownProps[nameProp])]; 

     return { 
      [dispatchProp]: makeChangeDispatcher(dispatch, path) 
     }; 

    } 

... 

あなたはより密接 `mapDispatchToProps`を読む@KyleRichardson lodash documentation of memoize