Dependency injection for react based upon inversify.
npm install @hooked74/react-di
Your tsconfig.json
needs to be configured with the following flags:
"experimentalDecorators": true,
"emitDecoratorMetadata": true
Service
import {Injectable, Inject} from '@hooked74/react-di';
@Injectable
export class UserService {
constructor(@Inject private httpClient: SomeHttpClient) {}
getUser() {}
}
Config
const CONFIG_TOKEN = 'config'; // or Symbol('config');
const config: Config = {...};
import {Inject} from '@hooked74/react-di';
class UserContainer extends Component<any, any> {
@Inject userService: UserService;
@Inject(CONFIG_TOKEN) config: Config;
async componentDidMount() {
const user = await this.userService.getUser();
this.setState({user});
}
render() {
return (<User user={this.state.user} />);
}
}
import {Module} from '@hooked74/react-di';
@Module({
providers: [
{provide: UserService, useClass: UserService},
UserService, // or shorthand
{provide: CONFIG_TOKEN, useValue: config},
{provide: CONFIG_TOKEN, useFactory: context => config}, // or using factory
]
})
class App extends Component {
render() {
return (
<Panel>
<UserContainer/>
</Panel>
);
}
}
If you want to inject a service instance, simply mark the property with @Inject
.
The type from which the instance will be created, will be derived from the
annotated type. Notice, that the type needs to be a class. An interface won't
work, cause it will not exist on runtime anymore (See
Injection via tokens to get it work with interfaces).
@Inject userService: UserService;
A services class need to be annotated with @Injectable
otherwise it will not
be - of course - injectable.
Dependencies can also be identified by a token. This makes sense when injecting a value (for example a configuration) or if you want annotate these properties with interfaces instead of class references.
@Inject(CONFIG_TOKEN) config: Config;
Multi injection means that all providers for a specified identifier
will be injected.
So if the annotated type of the dependency is of type Array
, the
injection will automatically processed as a multi-injection. In this
case the identifier needs to be passed explicitly:
@Inject(INTERCEPTOR_TOKEN) interceptors: Interceptor[];
Dependencies of react component need be injected via property injection:
import {Inject} from '@hooked74/react-di';
class UserComponent extends Component<any, any> {
@Inject userService: UserService;
@Inject(OtherService) otherService: OtherService;
@Inject(CONFIG_TOKEN) config: Config;
@Inject(TRANSLATION_TOKEN) translations: Translation[];
...
}
Dependencies of react component need be injected via useInject
hook:
import {useInject} from '@hooked74/react-di';
const UserComponent = () => {
const [otherService, config, translation]: [OtherService, Config, Translation] = useInject(OtherService, CONFIG_TOKEN, TRANSLATION_TOKEN)
...
}
Dependencies of services will be injected via constructor injection:
import {Injectable, Inject} from '@hooked74/react-di';
@Injectable
export class UserService {
constructor(@Inject http: HttpClient,
@Inject(OtherService) otherService: OtherService,
@Inject(HISTORY_TOKEN) history: IHistory) {}
}
Providers can be shared via importing from siblings or inheriting them from parent components.
Modules can be imported in other modules to share its providers.
@Module({providers: [CommonService]})
class CommonModule extends Component {}
@Module({
imports: [CommonModule],
providers: [UserService],
})
class UserModule extends Component {
@Inject userService: UserService;
@Inject commonService: CommonService;
}
@Module()
class Root extends Component {
render() {
return (
<UserModule/>
);
}
Nesting Module
annotated components in another Module
annotated components
is supported.
All defined providers of the parent module will be inherited to its
child modules:
@Module({providers: [UserService]})
class UserModule extends Component {}
@Module({providers: [CommonService]})
class App extends Component {
render() {
return (
<UserModule/> // CommonService will also be available in UserModule
);
}
Providers that are already defined in a parent, will be overridden if they are also defined in its child.
For testing purposes @hooked74/react-di
provides a TestUtil
component. Nest the
components you want to test in TestUtil
and setup its dependencies in
the providers
prop of TestUtil
:
import {mount} from 'enzyme';
mount(
<TestUtil providers={[{provide: UserService, useClass: UserServiceMock}]}>
<UserProfileContainer/>
</TestUtil>
);
or for defining a much simpler mock:
mount(
<TestUtil providers={[{provide: UserService, useValue: {getUser() {...}}}]}>
<UserProfileContainer/>
</TestUtil>
);
Injectable
decorator marks a class as available to the inversify Container
.
import {Injectable} from '@hooked74/react-di';
@Injectable
export class UserService {}
The Inject
/Inject(Identifier)
decorator tells the di-system what need to be injected
and in which property the injected value should be referenced.
For functional components an alternative is the useInject(...Identifiers)
hook.
All components that should be feedable with the defined providers, need to be nested in a module annotated component - But don't(!) need to be direct children.
@Module({
providers: [...],
imports: [...],
autoBindInjectable: true, // default is false
})
class App extends Component {}
(optional) Array of all available providers.
[{provide: UserService, useClass: UserService}]
Shorthand
[UserService]
All instantiated dependencies will be a singleton by default. If you don't
want a dependency to be singleton set noSingleton
to true
:
[{provide: UserService, useClass: UserService, noSingleton: true}]
[{provide: UserService, useValue: someUserService}]
Dependencies can be injected via factories. A factory is a simple function, that gets the context of the current scope and returns the value, that will be injected.
[{provide: UserService, useFactory: context => someValue}]
(optional) Array of all modules that should be imported.
[CommonModule, UserModule]
(optional, default: false
) When autoBindInjectable
is set to true
, injectable
class constructors don't need to be defined as providers anymore.
They will be available for injection by default.
So that [{provide: UserService, useClass: UserService}]
or [UserService]
can be omitted:
@Module({autoBindInjectable: true})
class App extends Component{}
<TestUtil autoBindInjectable={true}>
... // UserService will be available anyway
</TestUtil>
<TestUtil providers={[...]} autoBindInjectable={true}>
...
</TestUtil>
The <Provider>
component is a react component, that provides low-level
support for inversifyJS containers. In other words: It takes an
inversify container as property. So if you want to use all features
of inversify, this is the component you will fall in love with:
const container = new Container();
container.bind(Ninja).to(Samurai);
<Provider container={container}>
...
</Provider>
You can run some built-in commands:
Builds the app for production. Your app is ready to be deployed.
Visualize and analyze your bundle to see which modules are taking up space.
Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit.