Using this to set the state is no possible

[avifatal]

Hi,
I have the following code trying to set the state via this:

export class Store {
  public info = [{ status: "empty" }];
  public loadAll = () => {
    axios.get(url).then((x) => {
      this.info = x.data;
    });
  };
}

I can't make it work...
you can play around here: https://codesandbox.io/s/valtio-to-do-list-forked-70yhlx?file=/src/App.tsx:128-288

Thanks

[dai-shi]

Unfortunately, you seem to have some misconceptions with this behavior.

https://github.com/pmndrs/valtio#react-via-usesnapshot
Use of this is for expert users.
Valtio tries best to handle this behavior but it's hard to understand without familiarity.

Here's the fix, but I'd recommend to avoid using this.
https://codesandbox.io/s/valtio-to-do-list-forked-7k7bn0?file=/src/App.tsx

---

So, my recommendation is the following instead:

export const state = proxy({
  info: [{ status: "empty" }],
  loadAll: () => {
    axios.get(url).then((x) => {
      state.info = x.data;
    });
  },
});

[avifatal]

Thank you. can you please explain why using this is not recommended?
I got the idea from the docs.
Thanks

[dai-shi]

why using this is not recommended?

becuase it's hard to understand without familiarity.

[avifatal]

Thank you.
I wanted to use the this in order to have a base class and reuse async status pending, 'done', error and so...
I find it annoing to re-do it again and again...
Thanks