reflect

@エフェクター/反射

☄️エフェクターストアを接続して、フックなしでコンポーネントを反応させます。

インストール

npm install @effector/reflect
# or
pnpm add @effector/reflect

開始| APIドキュメント

モチベーション

反射のポイントは何ですか？

APIデザインは、古典的なHOC様パターンを使用して、効率的で構成可能な方法でエフェクターを使用して反応コンポーネントを書き込むことができます。

 import { reflect , variant } from '@effector/reflect' ;

export function UserForm ( ) {
  return (
    < FormCard >
      < Name />
      < LastName />
      < SubmitButton />
    </ FormCard >
  ) ;
}

const Name = reflect ( {
  view : Input ,
  bind : {
    value : model . $name ,
    onChange : model . nameChanged ,
  } ,
} ) ;

const LastName = reflect ( {
  view : Input ,
  bind : {
    value : model . $lastName ,
    onChange : model . lastNameChanged ,
  } ,
} ) ;

const SubmitButton = reflect ( {
  view : Button ,
  bind : {
    type : 'submit' , // plain values are allowed too!
    disabled : model . $formValid . map ( ( valid ) => ! valid ) ,
    onClick : model . formSubmitted ,
  } ,
} ) ;

ここでは、このコンポーネントを小さな部分に分離しました。これは、 reflect演算子を使用して便利な方法で作成されました。これは、 props -> valuesマッピングの非常に簡単な説明であり、読みやすく修正しやすいです。

@effector/reflect使用すると、 $formValidアップデートにより、submitbuttonが再レンダリングされるだけで、 <UserForm />の他のすべての部分については、文字通りゼロのReact作業があります。

詳細については、Motivationの完全な記事をご覧ください。

リリースプロセス

1. ドラフトリリースをご覧ください。
2. すべてのPRSには、正しいラベルと有用なタイトルが必要です。ここで利用可能なラベルを確認できます。
3. PRSとタイトルのラベルを更新し、次にドラフトリリースを再生するためにリリースドラフトアクションを手動で実行します。
4. 新しいバージョンを確認し、「パブリッシュ」を押します
5. 必要に応じて、「このリリースのために議論を作成する」を確認してください