joist-handlers-on-complete.ts

import { component, State, handle, JoistElement, get, HandlerCtx } from '@joist/component';
import { template, html } from '@joist/component/lit-html';

@component({
  tagName: 'my-counter',
  state: 0,
  render: template(({ state, run }) => {
    return html`
      <button @click=${run('dec_btn_clicked', -1)}>-</button>
      <span>${state}</span>
      <button @click=${run('inc_btn_clicked', 1)}>+</button>
    `
  })
})
class AppElement extends JoistElement {
  @get(State)
  private state!: State<number>;

  @handle('dec_btn_clicked')
  @handle('inc_btn_clicked') 
  updateCount(_: Event, n: number) {
    // State.setValue returns a promise so this will work even if state is set async
    return this.state.setValue(this.state.value + n);
  }
  
  // This will be called on all handlers for a given action have completed
  // The second argument will be the return value of all completed handlers
  onComplete({ action }: HandlerCtx, res: any[]) {
    console.log({ action, payload, state: this.state.value });
  }
}