rc-injectable

the missing dependency injection for react component

API Review

import { Component } from 'react';
import { Injectable, Service } from 'rc-injectable';
 
@Injectable()
export class GrandChild extends Component {
  
  get grandParent() {
    return this.injector.get(GrandParent);
  }
  
  get sibling() {
    return this.injector.get(Sibling);
  }
 
  render() {
    return (
      <dl>
        <dt>come from GrandParent:</dt>
        <dd>{this.grandParent.state.msg}
          <button onClick={this.grandParent.updateMsg}>
            click to update
          </button>
        </dd>
        <dt>come from Sibling:</dt>
        <dd>{this.sibling.msg}
          <button onClick={this.sibling.updateMsg}>
            click to update
          </button>
        </dd>
      </dl>
    );
  }
}
 
@Injectable()
export class GrandParent extends Component {
 
  state = {
    msg: `I'm GrandParent`,
  };
 
  updateMsg() {
    this.setState({
      msg: 'updated',
    });
  }
 
  render() {
    return (
      <Child/>
    );
  }
}
 
@Injectable()
export class Sibling extends Service {
 
  msg = `I'm Sibling`;
 
  updateMsg() {
    this.msg = 'updated';
  }
}

Version

major

rc-injectable/major

use Hook from react@16.8

minor

rc-injectable/minor

use Context from react@16.3

legacy

rc-injectable/legacy

use Legacy Context

原理

组件类型

import React, { Component } from 'react';
import { Injectable } from 'rc-injectable';
 
@Injectable()
export class extends Component {}

服务类型

import { Injectable, Service } from 'rc-injectable';
 
@Injectable()
export class extends Service {}