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 [email protected]

minor

rc-injectable/minor

use Context from [email protected]

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 {}