ES6/Redux: returning a function to remove event listener

Question

I am watching Dan Abramov's Redux tutorial on Egghead, and he does something that I am a little confused by. As a learning exercise, he has viewers rebuild the createStore abstraction. One method createStore provides is subscribe, which adds listeners to listen for store changes.

He then says:

There is an important missing piece here. We haven't provided a way to unsubscribe a listener. Instead of adding a dedicated Unsubscribe method, we'll just return a function from the Subscribe method that removes this listener from the listeners' array.

So the code he uses to add/remove the listener is:

const subscribe = (listener) => {
  listeners.push(listener);
  return () => {
    listeners = listeners.filter(l => l !== listener);
  };
};

I sort of understand that this allows you to use one function for both add/remove, and that this is possible because if you pass the subscribe method the name of a listener that is already subscribed, the filter will remove it, I do not understand why this returns an arrow function rather than an array of listeners. How/when would this returned function be invoked?

Answer 1

How/when would this returned function be invoked?

This function is invoked when the listener should be removed. When exactly this should happen depends on the app.

Invocation is simple:

const remove = subscribe(myListener);
// later:
remove();

I do not understand why this returns an arrow function rather than an array of listeners.

That would allow any subscriber to mess with the listeners array, or requires every subscriber to implement the same unsubscribe logic.