Realizing Dependency Inversion Principle with Flow in React.

We can make our codes static with Flow.

Flow: A Static Type Checker for JavaScript

Of course, by making codes static, we can use “Interface” like Java. The example is below. This is a child component.

// @flow
type Props = {
  name: string,
  age: number
}
export default class Person extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.state = {
      name: props.person.name,
      age: props.person.age,
    };
  }
  render() {
    return(
     <div>
       {this.state.name}
       {this.state.age}  
     </div>
    )
  }
}

And the next one is a parent component.

import Person from './Person.js'
export default class Person extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.state = {
      name: name // getting by API,
      age: age // getting by API,
    };
  }
  componentDidMount(){
    // Some APIs
  }
  render() {
    return(
      <div>
        <Person name={this.state.name} age={this.state.age}
      </div>
    )
  }
}

Both components depend on the interface(type Props). It is not necessary for the components to depend on each other with Flow.