createService

How to use?

// declare service
// App.service.ts
import { createService, StateHook, ReducerHook } from "class-service";
class ServiceData {
  name: StateHook<string>;
  state: ReducerHook<StateType, ActionType>;
  constructor() {
    this.name = useState("");
    this.state = useReducer((prv, action) => {
      /* ... */
    }, initState);
  }
}

export default createService(ServiceData);

// when use
import AppService from "App.service.ts";

function App() {
  const appService = AppService.useInject();
  return <div />;
}

export default AppService.connect(App);

since lot of api in React hooks was [A,B] form

so we recommend a function called service, to identify all the hooks inside the ServiceData class:

import { createService, service } from "class-service";

@service("nameHook, state$")
class ServiceData {
  nameHook: StateHook<string>;
  name!: string;
  state$: ReducerHook<StateType, ActionType>;
  state!: stateType | ActionType;
  constructor() {
    this.nameHook = useState("");
    this.state$ = useReducer((prv, action) => {
      /* ... */
    }, initState);
  }
}

// you can handle it via proxy
serviceData.name = 'test'
serviceData.state = 'ACTION_ONE'

BTW, use servie decorator uppon the useReducer api was not recommented,

but you still can try it anyway~