reflect

@efetor/refletir

☄️ Anexar lojas efetoras para reagir componentes sem ganchos.

Instalar

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

Introdução | API Docs

Motivação

Qual é o sentido de refletir?

É o design da API que, usando o padrão clássico do tipo hoc, permite que você escreva componentes do React com o efetor de uma maneira eficiente e composta.

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

Aqui, separamos esse componente em peças pequenas, que foram criadas de uma maneira conveniente usando operadores reflect , que é uma descrição muito simples dos props -> values , que é mais fácil de ler e modificar.

Com @effector/reflect , nossa atualização $formValid fará com que o SubmitButton seja renderizado novamente e, para todas as outras partes do nosso <UserForm /> haverá literalmente zero trabalho de reação.

Para saber mais, leia o artigo completo da motivação.

Processo de liberação

1. Confira o lançamento do rascunho.
2. Todos os PRs devem ter rótulos corretos e títulos úteis. Você pode revisar os rótulos disponíveis aqui.
3. Atualize os rótulos dos PRs e títulos, execute manualmente a ação de redather de liberação para regenerar o lançamento do rascunho.
4. Revise a nova versão e pressione "Publish"
5. Se necessário, verifique "Crie discussão para este lançamento"