confused with using proxy class to organize actions

[wind4gis]

i use class to organize actions, it will throw two kinds of err.

export class Service implements IService {
  detail: Partial<Detail> = {};

  init(Id: number) {
    return request.getDetail(Id).then((result) => {
      this.detail = result;
    });
  }
}

first, i can not use arrow method in class, it can not trigger the snap get the lastest value when i call init method. but the snap will re-render with empty value {}. and i need to bind this to the class itself, because this will lost when business call init method directly

sencond, i need to use both proxy and snap in my code, because the snap will trigger error when calling init method to update the snap object's detail, which is frozen object. so i need to call proxy object like Service to run init method...

[wind4gis]

so what is best practice to organize actions in class. or just use object instead?
emm... i want to use class bcz i want to use ioc framework in the future...

[wind4gis]

i think the object way might be something better..

// state.ts
export const Service: IService = proxy({
  detail: {},
  init(id: number) {
    return Request.getDetail(Id).then((result) => {
      Service.detail = result;
    });
  },
});
// component.tsx
export const Page = () => {
const snap = useSnapshort(Service)
useEffect(() => {
snap.init(1)
}, [])
return (<>{snap.detail}</>)
}

if use valtio in this way, the consumer do not need to carry about the difference between proxy object and the snapshort object, just use the snap object

[wind4gis]

finally, i try to write class in this way

// service.ts
export type IState = {
  detail: Partial<Detail>;
};

export type IService = IDomainModel<IState> & {
  init: (Id: number) => Promise<void>;
};


export type IDomainModel<T> = {
  getState(): T;
};

export class DomainModel<T extends object> implements IDomainModel<T> {
  constructor(state: T) {
    this.state = proxy(state);
  }

  protected state: T;

  getState() {
    return this.state;
  }
}

class Service extends DomainModel<IState> implements IService {
  constructor() {
    const state: IState = { detail: {} };
    super(state);
  }

  init(Id: number) {
    return Request.get(Id).then((result) => {
      this.state.detail = result;
    });
  }
}

export const service = new Service()
// page.tsx
const Page = () => {
const snap = useSnapshort(service)
useEffect(() => {
service.init()
}, [])

return (<>{snap.detail}</>)
}

[dai-shi]

i need to use both proxy and snap in my code

I would avoid using snap in the state model. But if you find something works with your need, it's fine.