reflect

@ effecteur / refléter

☄️ Attachez les magasins effecteurs pour réagir les composants sans crochets.

Installer

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

Commencer | Docs API

Motivation

Quel est l'intérêt de réfléchir?

C'est la conception de l'API qui, en utilisant le motif classique de type hoc, vous permet d'écrire des composants React avec effecteur d'une manière efficace et composable.

 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 ,
  } ,
} ) ;

Ici, nous avons séparé ce composant en petites pièces, qui ont été créées de manière pratique à l'aide des opérateurs reflect , qui est une description très simple du mappage des props -> values , qui est plus facile à lire et à modifier.

Avec @effector/reflect , notre mise à jour $formValid ne fera que renvoyer le soumis de soumission, et pour toutes les autres parties de notre <UserForm /> il y aura littéralement un travail de réaction zéro .

Pour en savoir plus, veuillez lire l'article complet de la motivation.

Processus de libération

1. Découvrez le projet de version.
2. Tous les PR doivent avoir des étiquettes correctes et des titres utiles. Vous pouvez consulter les étiquettes disponibles ici.
3. Mettre à jour les étiquettes pour PRS et les titres, exécutez ensuite manuellement l'action Drafter de version pour régénérer le projet de version.
4. Passez en revue la nouvelle version et appuyez sur "Publier"
5. Si nécessaire, vérifiez "Créer une discussion pour cette version"