Use in React

redi provides API to help use DI in React.

Component provides dependencies

Component could connect with an array of dependencies. As a result, the connected component would create a RediContext to provide an injector.

const App = connectDependencies(
  function AppImpl() {
    //...
  },
  [[PlatformService]],
);

Component could also be connected to an injector.

const injector = new Injector([[PlatformService]]);
 
const App = connectInjector(function AppImpl() {
  //...
}, injector);

The difference between connectDependencies and connectInjector is: connectDependencies would always create a new injector when the connected components mounts. However, connectInjector would never create an injector but use the created injector.

When two components that are connected to dependencies become ancestor and child components, the injectors would become parent child injector as well.

Component consumes dependencies

Use the following Hooks to get an injector or a dependency:

function Dashboard() {
  const injector = useInjector();
  const platformService = useDependency(PlatformService);
}

Use WithDependency to get dependency in class components:

class Dashboard extends React.Component {
  static contextType = RediContext;
 
  @WithDependency(PlatformService)
  private readonly platformSrv!: PlatformService;
}