How to dispatch from overridden function inside a normal class

Question

I'm trying to call dispatch inside a class. All possible ways to do this lead me to an dead end. Maybe is my case a little special:

I have a class which I nead to override and from inside an overridden function I do need to call dispatch.

class RolloverModifierEx extends RolloverModifier {
    
    override hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo {
    
       const hitTest = rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y, this.hitTestRadius);
       // some code ...

       this.dispatch(updateCurrentValue({
         title:  dataSeriesName ,
         currentValue: yValueCalculated)
       }));

       // some more code ...
       return hitTest;
    }
}

I've tried different ways like using "connect" from react-redux, or making a wrapper class for the dispatch, but all things brought me to the same problem that is isn't possible to call dispatch from outside a react component.

I'm kind of clueless and really need help...

Are you ***not*** using React? `react-redux` is for React components. If you are not using React and React components then the `connect` HOC won't work. You can dispatch actions directly to the store. — Drew Reese, Oct 10 '22 at 06:29

score 2 · Answer 1 · answered Oct 11 '22 at 10:13

Found The solution for the problem:

I used the constructor to pass the store into the class and then I can call dispatch on that. Thanks at @Javokhir for the hint with the store.

class RolloverModifierEx extends RolloverModifier {

  private store : any;

  constructor(props){
    super(props);
    this.store = props.store;
  }
    override hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo { 
  const hitTest = mousePoint && rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y, this.hitTestRadius);

      // some code... than finally call dispatch 
      this.store.dispatch(updateCurrentValue(
      {
         title:  hitTest.dataSeriesName,
         currentValue: newYValue
      }));    
    }
       return hitTest;
    }
}

From outside this is then called like this:

import { useStore } from 'react-redux';

.....
const store: any = useStore();
....
const rolloverModifier = new RolloverModifierEx({
  id: 'rollover',
  snapToDataPoint: false,
  store
});

How to dispatch from overridden function inside a normal class

1 Answers1