Is this a good practice with class state?

[varHarrie]

Full Example: https://codesandbox.io/s/valtio-forked-z5f9it

I add a bind util to avoid 'set' on proxy: trap returned falsish for property 'xxx':

function bind<T extends object>(instance: T): T {
  const obj = instance as any;
  const names = Object.getOwnPropertyNames(Object.getPrototypeOf(obj));

  for (const name of names) {
    const method = obj[name];
    if (name === "constructor" || typeof method !== "function") continue;
    obj[name] = (...args: unknown[]) => method.apply(instance, args);
  }

  return instance;
}

class BearStore {
  water: number = 0;

  drink() {
    this.water += 1;
  }
}

const bearStore = bind(proxy(new BearStore()));

function useBearStore() {
   return useSnapshot(bearStore);
}

export default function App() {
  const bearStore = useBearStore();

  console.log('render')

  return (
    <>
      <div>{bearStore.water}</div>
      <button onClick={() => bearStore.drink()}>drink</button>
    </>
  );
}

There seems to be no problem. Is there something I missed?

[dai-shi]

Yeah: https://github.com/pmndrs/valtio/wiki/How-to-organize-actions#using-class

I'm not sure why you need bind().

[varHarrie]

In order to forcibly bind this of all methods to state instance, so that I can call actions using snapshot. Based on #205 (comment)

[dai-shi]

Oh, sure. I missed that point. Thanks for the clarification.

[ckken]

v2 need bind too?

[dai-shi]

I think so. Have you tried anything?