Alternative class based API

Inspired by the typing goodness of useMethods, I've been using a modified version that works nicely with Typescript. I've been calling it useInstance :)

const state = useInstance(() => new CounterState());

And you define your state/actions in a single class:

class CounterState {

  nextId = 0;
  counters = [];
  updateCount = 0;

  addCounter() {
    this.counters.push({ id: this.nextId++, count: 0 });
  }
  incrementCounter(id) {
    this.getCounter(id).count++;
  }
  resetCounter(id) {
    this.getCounter(id).count = 0;
  }

  // "Dispatch" methods can call other private methods (and return values)

  private getCounter(id) {
    return this.counters.find(counter => counter.id === id);
  }

  // You can return the state to replace the state completely
  // Otherwise, do not return state (see immer for details)

  startOver() {
    return new CounterState();
  }

  // I've been playing with this idea.. 
  // A "magic" method that runs just before every dispatch end. 

  beforeDispatchEnd() {
    this.updateCount++;
    console.log("Update done. Count: " + this.updateCount);
  }
}

What I like about this API:

wraps state together with the actions that modify it (love or hate it)
from "dispatched" methods, you can call internal/private methods (with return values)
works nicely with types/refactoring

Here's a demo (as a JS class, but intended for Typescript): https://codesandbox.io/embed/usereducer-vs-usemethods-comparison-llmvr

As it's a little out of scope I was going to create a new project.. or ... would you be interested in integrating something like this?

Related #18 #2

pelotom / use-methods

Alternative class based API #21