mapDispatchToProps関数のため、接続されたReact PureComponentを再レンダリングしないようにするにはどうすればよいですか？

Question

mapDispatchToPropsが呼び出されるたびに、新しい関数を生成して返します。たとえば：

const mapDispatchToProps = function(dispatch, ownProps) { 
    return { 
    addToStack: (episodeId, stackId) => { 
     return dispatch(StackAction.addEpisodeToStack(episodeId, stackId)); 
    }, 
    }; 
} 

mapDispatchToPropsが呼び出されるたびに、それは新しい矢印機能で、新しいオブジェクトを生成します。

私のアプリケーションでは、コンポーネントを再レンダリングしないでください。 PureComponentを使用することがしばしばあります。しかし、関数は常に異なるので、PureComponentは役に立たず、shouldComponentUpdate戦略を作成する必要があります。そこでは、mapDispatchToProps関数のすべてを「ブラックリストに登録」してそれらのすべてを無視する必要があります。私は再レンダリングを避けるために、リストにすべての新しい関数を追加する必要があります。

const blacklist = [ 
    'addToStack', 
] 

shouldComponentUpdate(nextProps, nextState) { 
    for (let i in nextProps) { 
    if (blacklist.includes(i)) continue; 
    if (nextProps[i] !== this.props[i]) { 
     return true; 
    } 
    } 
    for (let i in nextState) { 
    if (nextState[i] !== this.state[i]) { 
     return true; 
    } 
    } 
    return false; 
} 

私は新しいソリューション

const dispatch; 
const mapDispatchToPropsFunctions = { 
    addToStack: (episodeId, stackId) => { 
    return dispatch(StackAction.addEpisodeToStack(episodeId, stackId)); 
    }, 
}; 

const mapDispatchToProps = function(dispatchArg, ownProps) { 
    dispatch = dispatchArg 
    return mapDispatchToPropsFunctions; 
} 

機能が一定であると再トリガされませんこの方法で作ってみた：ここ

はブラックリストshouldComponentUpdateの定型の一例ですPureComponentのレンダリングで、shouldComponentUpdate関数を維持する必要はありません。

しかし、これは私にとっては間違っているようです。 この問題に対処する "デフォルト"の方法はありますか？

Answer 1

私は一般的にに助言します。そのような小道具の値をキャプチャする代わりに、小道具の値をアクション作成者に渡すハンドラメソッドをクラスに作成してみてください。また、人々はmapDispatchの関数を直接書くのではなく、connect()の場合は "object shorthand"を使用することをお勧めします。

例：特定のスニペットで

const actions = {addToStack : StackAction.addEpisodeToStack}; 

class MyComponent extends React.Component { 
    addToStack =() => { 
     this.props.addToStack(this.props.episodeId, this.props.stackId); 
    } 
} 

、あなたも、とにかくmapDispatchのいずれかの小道具の値を参照していないように見えますので、ownPropsパラメータを宣言する必要はありませんでした。 （。ownPropsパラメータが要求された場合、コンポーネントが作成されるときconnectは、そうでない場合、それは一度だけmapDispatchを呼び出すmapDispatch機能を複数回呼び出します。）