Best way of setting a state with Redux and React Hooks

Viewed 46

Currently i implemented React Hooks with Redux. Now the only issue is that when changing the Redux state the performance is going down in my app e.g:

import { cardItemIsDragging, storeWidgetDrag } from '../../redux/actions';

then:

/** pass currentUser and currentChannel from redux to global props */
const mapStateToProps = state => ({
  storeWidget: state.storewidgetinfo.storeWidgetInfo,
  storeDrag: state.storewidgetdrag.storeWidgetDrag,
  storeDelete: state.storewidgetdelete.storeWidgetDelete,
});

and also having:

/** @component */
export default connect(mapStateToProps, {
  cardItemIsDragging,
  storeWidgetDrag,
})(Layout);

Now inside of this component there is a function that will update the Redux state:

  /** Calls when drag starts. */
  const onDragStart = () => {
    const { cardItemIsDragging } = props;
    cardItemIsDragging(true);
  };

Im updating this state because im also using it in another component. The code above is resulting in a performance drop of the component/app, so my question is what is the best practice to setup Redux without losing performance / unnecessary re-rendering of the component, but keep changing state while it is needed in another component.

0 Answers
Related