Dependency Injection

In React the need of dependency injection is easily visible. Let’s consider the following application tree:

  1. // Title.jsx
  2. export default function Title(props) {
  3.   return <h1>{ props.title }</h1>;
  4. }
  1. // Header.jsx
  2. import Title from './Title.jsx';
  3. export default function Header() {
  4.   return (
  5.     <header>
  6.       <Title />
  7.     </header>
  8.   );
  9. }
  1. // App.jsx
  2. import Header from './Header.jsx';
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = { title: 'React Dependency Injection' };
  7.   }
  8.   render() {
  9.     return <Header />;
  10.   }
  11. }

The string “React Dependency Injection” should somehow reach the Title component.
The direct way of doing this is to pass it from App to Header and then Header to pass it to Title.
However, this may work for these three components but what happens if there are multiple properties and deeper nesting.
Lots of components will have to mention properties that they are not interested in.
It is clear that most React components receive their dependencies via props but the question is how these dependencies reach that point.

One way to achieve dependency injection is by using higher-order component to inject data.

  1. // inject.jsx
  2. var title = 'React Dependency Injection';
  3. export default function inject(Component) {
  4.   return class Injector extends React.Component {
  5.     render() {
  6.       return (
  7.         <Component
  8.           {...this.state}
  9.           {...this.props}
  10.           title={ title }
  11.         />
  12.       )
  13.     }
  14.   };
  15. }
  1. // Title.jsx
  2. export default function Title(props) {
  3.   return <h1>{ props.title }</h1>;
  4. }
  1. // Header.jsx
  2. import inject from './inject.jsx';
  3. import Title from './Title.jsx';
  5. var EnhancedTitle = inject(Title);
  6. export default function Header() {
  7.   return (
  8.     <header>
  9.       <EnhancedTitle />
  10.     </header>
  11.   );
  12. }

The title is hidden in a middle layer (higher-order component) where we pass it as a prop to the original Title component.
That’s all nice but it solves only half of the problem.
Now we don’t have to pass the title down the tree but how this data will reach the enhance.jsx helper.

Using React’s context

React has the concept of context. The context is something that every component may have access to.
It’s something like an event bus but for data. A single model which we can access from everywhere.

a place where we’ll define the context

  1. var context = { title: 'React in patterns' };
  2. class App extends React.Component {
  3.   getChildContext() {
  4.     return context;
  5.   }
  6.   // ...
  7. }
  9. App.childContextTypes = {
  10.   title: PropTypes.string
  11. };

A place where we need data

  1. class Inject extends React.Component {
  2.   render() {
  3.     var title = this.context.title;
  4.   // ...
  5.   }
  6. }
  7. Inject.contextTypes = {
  8.   title: PropTypes.string
  9. };

Related links: