Question: IOC container in a react project

[fekete965]

I am fairly new to dependency injection and IOC containers.
I find typed-inject's API much friendlier than similar libraries.
I am trying to make my react project work with typescript and an IOC container using typed-inject.
Has anybody ever done something similar? I would be interested to see any kind of examples. 🙏

[cederron]

If you follow the tutorial in the readme, then you just inject the service in the component state:

const [service] = React.useState(appInjector.injectClass(MyService));

[fekete965]

@cederron I have read through the documentation but thanks for the tip.

I thought about making a HOC which would inject the correct services I need but declaring the type definition is a nightmare and I am not super good with that.

I actually did a custom hook which pulls out the correct service from my IOC Container:

const InjectorContainerContext = createContext<Injector<ContainerContext> | null>(null)

interface Props {
  container: Injector<ContainerContext>
}

export const InjectionProvider = ({ children, container }: PropsWithChildren<Props>) => {
  return <InjectorContainerContext.Provider value={container}>{children}</InjectorContainerContext.Provider>
}

export function useInjection<Token extends keyof ContainerContext>(identifier: Token) {
  const container = useContext(InjectorContainerContext)

  if (!container) {
    throw new Error('useInjection must be used within InjectionProvider')
  }

  return useMemo(() => container.resolve(identifier), [container, identifier])
}

Then it can be used like so:

const presenter = useInjection('appPresenter')

(presenter has the correct type in the component)

I was just curious what solution other people come up with :)

[cederron]

I dont know your requirements and why you need to inject through a context, but if you do as i posted it just works, and types are correct

[fekete965]

I am not sure if I happen to swap any of the services it will update the useState's value correctly as it would only run once the component's been mounted 🤔

I guess I will need to experiment with it. Thanks a lot for your input! :)