reactjs - React/Redux での reselect の使用

Question

コンテナコンポーネントを介して中央ストア（つまり、reduxストア）を使用するコンポーネントのセットがあります。これらのコンポーネントはフラットで単純で、HOC コンポーネント内に存在する傾向があります。HOC コンポーネントはreact-redux connectを利用します。

class HOComponent extends Component {
   const { data1, data2 } = this.props;
   render() {
      <Component1 data={data1} />
      <Component2 data={data2} />
   }
}
const selector = (state) => ({
    data1 = selectors.data1(state),
    data2 = selectors.data2(state),
    other = selectors.other(state)
});

上記は、それぞれ子コンポーネントComponent1 Component2のセレクターです。

以下は、 reselectを使用するセレクターの外観です。

const alldata = (state) => 
    state.alldata;

 export other = (state) =>
     state.other;

 export data1 = createSelector(
 [alldata], 
 (alldata) => {
    //lets assume
    return alldata.filter(d => d.criteria === data1.criteria);
  })

 export data2 = createSelector(
 [alldata], 
 (alldata) => {
    //lets assume
    return alldata.filter(d => d.criteria === data2.criteria);
  })

問題は、この再選択の正しい使用法です。HOCの他のセレクターがComponent1 Component2をトリガーした場合、とにかく再レンダリングされるため、これは効果がないことに気付きました。shouldComponentUpdateメソッド内の各データ フローをチェックする必要があります。再選択の使用法は、最初にこの問題と戦うと思いました。私はそれを誤解しましたか。それは再計算部分を防ぐだけですか？

これは私の以前の投稿の続きであり、 子コンポーネントのセレクターが redux でトリガーされるのを防ぎます