Reducer State management library, similar to Redux, using EventTarget

store.js

class Store extends EventTarget {
  constructor(reducer, state) {
    super()
    this.#reducer = reducer
    this.#state = state
  }
  get state() {
    return this.#state
  }
  dispatch(action) {
    this.#state = this.#reducer(this.state, action)
    this.dispatchEvent(new Event('change'))
  }
}

To connect a web component to a store with Decorators:

const connect = store => Super => class extends Super {
  #abortController = null
  connectedCallback() {
    this.#abortController?.abort()
    const {signal} = this.#abortController = new AbortController()
    store.addEventListener('change', () => this.handleChange(store.state), { signal })
  }
  disconnectedCallback() {
    this.#abortController?.abort()
  }
}

const store = new Store((state, action) => {
 // Reducer logic...
})

@connect(store)
class MyElement extends HTMLElement {
  handleChange(newState) {
    // Update logic
  }
}