依存性の注入（DI）をしたい React コンポーネントの書き方

依存性の注入（DI）をしたい React コンポーネントの書き方

April 1, 2022

以下のように書くと、テストなどでモックを使用したい時は外から渡すこともでき、テスト以外のときは呼び出し元のコンポーネントでプロップスを渡す必要もないので便利です。

import Database from './Database';

type Props = {
  database?: Database;
};

const defaultProps = {
  database: new Database(),
};

function Component(props: Props) {
  const { database } = { ...defaultProps, ...props };

  const handleLogin = () => database.signin();

  return <button onClick={handleLogin}>Sign in</button>;
}

export default Component;