如何删除在发布/订阅数据存储区中注册的回调？

Question

See the following simple pub/sub-type dataStore which I have implemented:

class DataStore {
    constructor() {
        this.store = {};
        this.callbacks = {};
    }

    getState(key) {
        return this.store[key];
    }

    setState(key, value) {
        this.store[key] = value;
        this.callbacks[key].forEach( callback => {
            callback(this.store[key]);
        });
    }

    onChange(key, callback) {
        this.callbacks[key] = this.callbacks.key || [];
        this.callbacks[key].push(callback);
    }
}

I am trying to figure out how to implement a removeCallback method for this class, and I am not really getting anywhere. I can call filter on the callbacks and use !== to find the exact function and remove it, ie:

removeCallback(key, callback) {
    this.callbacks[key].filter( cb => cb !== callback );
}

--but that approach is dependent on having the callback saved, which I wouldn't. See below:

store.onChange('someValue', val => { /* do something with val */ });
store.removeCallback('someValue', ???);

Since the function passed to onChange was effectively anonymous, how can I identify it?

Answer 1

The caller of removeCallback needs to have something that uniquely identifies the callback. The easiest way would be to store the callback in a variable first:

const cb = val => { /* do something with val */ };
store.onChange('someValue', cb);
store.removeCallback('someValue', cb);

Also note that .filter does not mutate the existing array - you'd need to assign the result of .filter to this.callbacks[key] :

removeCallback(key, callback) {
  this.callbacks[key] = this.callbacks[key].filter( cb => cb !== callback );
}

You also probably want to change

this.callbacks[key] = this.callbacks.key || [];

to

this.callbacks[key] = this.callbacks[key] || [];
                                    ^^^^^

Or, you might use a Set instead, removing the need for .filter and iteration:

onChange(key, callback) {
  this.callbacks[key] = this.callbacks[key] || new Set();
  this.callbacks[key].add(callback);
}
removeCallback(key, callback) {
  this.callbacks[key].delete(callback);
}

If you wanted to be slightly terser, you could have onChange return the passed callback:

const cb = store.onChange('someValue', (val) => { ... });

with

onChange(key, callback) {
  this.callbacks[key] = this.callbacks[key] || new Set();
  this.callbacks[key].add(callback);
  return callback;
}