[FR] More idiomatic solution for adding/removing state-dependent event listeners

Recently I have a use case where I need to add event listener in response to state change, using subscribe. Currently there is no idiomatic way to remove those listeners.

Currently I’m doing it like so, but it doesn’t feel right.

let listener
subscribe(
  someState => {
    window.removeEventListener('click', listener)
    
    listener = () => console.log(someState)
    
    window.addEventListener('click', listener)
  },
  selector

I guess an API similar to React’s useEffect with cleanup function would do the trick?

This also applies to setInterval and setTimeout.

[universse]

Yes I want it to run when state changes. On the other hand, unsubscribing would prevent further addition of event listeners.

Thanks for the sample solution. Perhaps it can be extracted to a middleware. Thus, there’s no need to include it in core.

function cleanUp(listener) {
  let cleanup

  return (...args) => {
    if (typeof cleanup === 'function') {
      cleanup()
    }
    cleanup = listener(...args)
  }
}

function withEffect(initial) {
  return (set, get, api) => {
    api.runEffect = (listener, ...rest) =>
      api.subscribe(cleanUp(listener), ...rest)

    return {
      ...initial,
    }
  }
}

const [useStore, { runEffect }] = create(withEffect({ todos: [] }))

runEffect(
  todos => {
    const listener = () => console.log(todos)

    window.addEventListener('click', listener)

    return () => {
      window.removeEventListener('click', listener)
    }
  },
  state => state.todos
)

[drcmda]

state => [state[stateA], state[stateB]] would only work if you add , shallow) in the end, but that aside, let me think about it for a while. it could be useful to have …

@JeremyRH what’s your opinion?