Oh my, your store is in a right two and eight.

Counter

0

+ 1Reset

Counter.tsx

import { TwoAndEight, createReactStore } from '2n8'

class Store extends TwoAndEight {
  count = 0

  addClicked() {
    this.count++
  }

  resetClicked() {
    this.$reset('count')
  }
}

const useStore = createReactStore(new Store())

const Counter = () => {
  const count = useStore('count')
  const addClicked = useStore('addClicked')
  const resetClicked = useStore('resetClicked')
  return (
    <div>
      <span>{count}</span>
      <button onClick={addClicked}>One up</button>
      <button onClick={resetClicked}>Reset</button>
    </div>
  )
}

Async

 Reset

Async.tsx

import { TwoAndEight, createReactStore } from '2n8'

class Store extends TwoAndEight {
  status: 'idle' | 'pending' | 'success' = 'idle'

  async buttonClicked() {
    this.status = 'pending'
    this.$emit()
    await fetchData()
    this.status = 'success'
  }

  resetClicked() {
    this.$reset('status')
  }
}

const useStore = createReactStore(new Store())

const Async = () => {
  const status = useStore('status')
  const buttonClicked = useStore('buttonClicked')
  const resetClicked = useStore('resetClicked')
  return (
    <div>
      <button onClick={buttonClicked}>
        {status === 'idle' ? (
          <DownArrowIcon />
        ) : status === 'pending' ? (
          <SpinnerIcon />
        ) : (
          <DoneIcon />
        )}
      </button>
      <button onClick={resetClicked}>Reset</button>
    </div>
  )
}