Alternative syntax using `this`?

An alternate, more “method”-y API would be to use this as the state variable, which would mean you could provide a simple record instead of a function of state:

const initialState = { count: 0 };

const methods = {
  reset() {
    return initialState;
  },
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  },
};

Another advantage is that VSCode gives this special emphasis and color, so it’s easy to tell at a glance where state access and “mutation” is happening.

Downsides of this approach:

• Can’t use arrow functions to define methods
• Can’t decide to use a shorter name for the state variable, e.g. s
• Can’t compute variables from state that will be in scope for all methods, e.g.:

  const methods = state => {
    const { x, y, z } = state;
    return {
      // ... method definitions
    }
  };
  

I’m curious if others have any opinions about this.

[TedDriggs]

I like it as-is (without this), partially because we use a lint that disallows this outside class bodies, and partially because this is a piece of JS magic that always seems suspicious.

[pelotom]

Yeah, this would always be bound, because we wouldn’t be using classes, just generating a bunch of functions which come pre-bound to their context.