usage of reselect in React/Redux

256 views Asked by At

i have set of components those use central store(i.e. redux store) via container component. these components are tend to be flat simple and reside within HOC component. HOC component utilizes 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)
});

above is the selector for child component Component1 Component2 respectively.

Below how is the selectors look like which utilizes 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);
  })

the question is this right usage of the reselect i noticed this is ineffective, since if my HOC other selctor triggered Component1 Component2 also being rerendered anyway. should i be checking each data flow within shouldComponentUpdate method. i thought reselect usage will battle with this issue in first place. did i misunderstand it. is it only prevents recalculation part?

this is continuation of my earlier post prevent selectors of child components being triggerred in redux

0

There are 0 answers