demo.ts

@customElement("demo-element")
export class DemoElement extends LitElement {
  state: DispatcherType<DemoElementState>;

  constructor() {
    super()
    // register dispatcher in the constructor
    this.state = useDispatcher<DemoElementState>(this, { actions: [] })
  }

  render() {
    // get the current state for each rendering
    const { actions } = this.state.getState()
    // Change the state from multiple different actions using the publish function
    const { publish } = this.state
    return html` <div>
        <trigger-button name="Button1"
          @trigger="${(e: CustomEvent) => publish({ actions: [...actions, e.detail] })}"
        ></trigger-button>
        <trigger-button name="Button2"
          @trigger="${(e: CustomEvent) => publish({ actions: [...actions, e.detail] })}"
        ></trigger-button>
        <input
          type="checkbox"
          @change="${({ target }: CheckableInputElement) => publish({ actions: [...actions, `Element checked: ${target.checked}`] })}"
        />
      </div>
      <action-list .actions="${actions}"></action-list>`
  }
}