Unable to unsubscribe from event listeners

[hutch120]

Hi All,

I've just spent quite a while tracking down an issue that results in multiple triggering of the on('xxxx') functions.

I have a react application that moves between pages, and loads/unloads components as it should. But, when I unload this module, it maintains the listener state, despite calling removeControl.

Essentially the issue (other than annoyance of multiple callbacks) is that eventually you will hit the maxListeners limit of 10 if you call the on handlers. E.g. on('route') because there is no way to unregister listeners, not even by using removeControl.

I've got a workaround in my code that sets a static variable, and checks that before registering the listener, but feelsbadman.

I think there are two things that could resolve this.

1. Remove listeners on removeControl

{
    key: 'onRemove',
    value: function onRemove(map) {
      this._events[type] = null; // <<====== ADD THIS LINE

and/or

2. Add an un function to remove a listener. A bit harder..

{
    key: 'un',
    value: function on(type, fn) {
      this.actions.eventUnSubscribe(type, fn);
      return this;
}

function eventUnSubscribe(type, fn) {
  return function (dispatch, getState) {
    var _getState8 = getState(),
        events = _getState8.events;

    events[type] = events[type] || [];
    // >>>>> FIND AND REMOVE THE EVENT <<<<<
    return {
      type: types.EVENTS,
      events: events
    };
  };
}

[patrix]

I had the same problem, then I choose the second option.

The issue #40 have a commit related that implements the off method like the your un function.

[hutch120]

@patrix Thanks for referencing that code. I'll close this issue. For reference, my workaround in React looks something like this:

class MapComponent extends React.Component {
  static routeListenerAdded

  componentDidMount () {
    this.mbControlDirections = new window.MapboxDirections({ ... })
    if (!MapComponent.routeListenerAdded) {
      MapComponent.routeListenerAdded = true
      this.mbControlDirections.on('route', evt => { ... })
    }
  }

  componentWillUnmount () {
    if (this.mbControlDirections) {
      this.mbMap.removeControl(this.mbControlDirections)
    }
  }
}

[neeleshbisht99]

Can you please elaborate the second method a bit more ?

[hutch120]

@neeleshbisht99 patrix coded it... not sure how much clearer it can be than that... #194

[neeleshbisht99]

@hutch120 I got it , thanks

[douglasg14b]

It's still ambiguous, it doesn't seem to comment on how it guarantees function matches. For instance, does it unsubscribe:

 map.on('zoom' () => handleZoom());

map.off('zoom' () => handleZoom());

My understanding is that this might now? If not, then that's a gotcha that isn't made clear.