I am having trouble implementing dependency injection using tsyringe in a React Typescript application with MobX and some inheritance

Question

I have the following test React application:

import "reflect-metadata";
import { observer } from 'mobx-react-lite';
import { observable } from "mobx";
import { container, singleton, injectable } from "tsyringe";

class Person{
  @observable first_name: string;
  @observable last_name: string;
}

abstract class Controller {
  @observable enabled: boolean = true;
}

abstract class ListController<T> extends Controller {
  @observable items: T[];
  
  @observable selected: T;
}

@singleton()
class ApplicationController extends Controller {
  constructor() {
    super();

    console.log("ApplicationController");
  }
}

@injectable()
class PersonListController extends ListController<Person> {
  constructor() {
    super();

    console.log("PersonListController");
  }
}

const PersonListComponent = observer(() => {
  const person_list_controller = container.resolve(PersonListController);

  return (
    <h1>Person List</h1>
  );
});

const App = observer(() => {
  const application_controller = container.resolve(ApplicationController);

  return (
    <div>
      <PersonListComponent />
      <PersonListComponent />
    </div>
  );
});

export default App;

This is the result in my console:

ApplicationController

App.tsx:203 PersonListController

I am expecting 1 instance of ApplicationController and 2 instances of PersonListController but I am getting 4 instances of PersonListController.

Why is this happening?

I am having trouble implementing dependency injection using tsyringe in a React Typescript application with MobX and some inheritance

0 Answers0