Melhorando a experiência de desenvolvimento
Conversando com colegas de diferentes empresas, notei que muitas equipes adoram o NgRx. Durante nossas discussões, o pensamento não me deixou:
"Seria bom manter menos código e seguir mais os guias de redação para facilitar o dimensionamento subsequente" .
Isso me levou a começar a explorar várias técnicas de refatoração do Redux. Assisti a um vídeo, li artigos e documentos do Redux. No final, escrevi um plugin para o NgRx chamado NgRx Ducks
Objetivos
Basicamente, o ngrx-ducks foi criado para simplificar o trabalho com o NgRx.
- Manipulação de ação simplificada usando a API do Decorator , que reduz a quantidade de código que precisa ser gravada para configurar o Redutor e o criador da ação. O NgRx Ducks gera automaticamente criadores de ação e recursos de redutor .
- Menos suporte técnico, pois você não precisa escrever enumerações ou tipos de união .
- Uma lógica de aplicativo mais clara é fornecida graças a uma API de tipo intuitivo que você pode usar como um Serviço injetável , que configura a interação com a Loja para você.
Como isso funciona?
Esta biblioteca funciona como uma camada extra no NgRx. Ele cria automaticamente criadores de ação e recursos redutores para você. Além disso, você obtém um serviço que pode ser usado em seus componentes. Este serviço fornece uma API estritamente digitada que permite ações de despacho e seleção de dados do armazenamento.
A biblioteca NgRx Ducks não modifica o comportamento existente do NgRx. Ele controla apenas os Repositórios Observáveis e o método de despacho .
Como o NgRx Ducks depende apenas da expedição e do fato de o Repositório fornecer um Observável, o NgRx Ducks permanece compatível com o NgRx, mesmo se houver alterações críticas na liberação.
Instalação
O NgRx Ducks se integra perfeitamente a um projeto NgRx existente. Basta instalar o pacote npm e você está pronto para começar.
npm install @co-it/ngrx-ducks
API do decorador
A idéia principal do NgRx Ducks é combinar tipos de ação e lógica do mutador ( também chamados de redutores ). Portanto, o decorador @Ducksify foi adicionado para anotar uma classe regular.
import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {}
O decorador permite que você especifique o estado inicial do seu estado. Passar initialState permite que o NgRx Ducks gere automaticamente uma função redutora posteriormente.
Agora você pode colocar a lógica de mutação dentro da classe. Não é mais necessário escrever expressões de maiúsculas e minúsculas . Em vez disso, criamos um mapeamento entre o tipo de ação e a lógica de mutação usando o decorador Action .
import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } }
O NgRx Ducks mapeia todas as ações com a lógica de mutação correspondente. Duck contém todas as informações necessárias para gerar a função redutora.
Função redutora
As funções do redutor são geradas automaticamente usando o NgRx Ducks. A fábrica reducerFrom cria uma tabela de pesquisa para mapear cada tipo de ação para sua lógica de mutação correspondente.
import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); }
Você ainda precisa agrupar reducerFrom dentro da função exportada para funcionar corretamente com o compilador AoT .
O redutor gerado deve ser adicionado ao ActionReducerMap usando NgRx ( veja o exemplo abaixo ).
Poder do pato!
O mais interessante ainda está por vir! O objetivo do NgRx Ducks é simplificar a interação com o Warehouse. Com a geração automática da função redutora, tudo está bem, então vamos dar uma olhada na fachada dinâmica , que também é criada aqui.
O decorador do @Ducksify também se encarrega de registrar seu pato como um Serviço no contêiner de IoC Angular. Isso significa que você pode incorporar o duck no seu componente!
Envio de ação do Vault
O NgRx Ducks adiciona algumas correções ao Duck que permitem usar chamadas de função simples em vez de enviar ações manualmente. Você recebe uma API digitada dentro de seus componentes.
import { Duck } from '@co-it/ngrx-ducks'; @Component({ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } }
Você implementa o Duck, não o próprio contador. O Duck cria automaticamente um criador de ações para incrementBy que despacha a ação com o valor passado (carga útil). Graças aos tipos dinâmicos do TypeScript, você obtém o preenchimento automático imediatamente no IDE.
Em resumo, o NgRx Ducks automatiza todo o processo de processamento de ações. Você configura a ação uma vez no Duck e, em seguida, simplesmente usa a fachada dinâmica digitada, gerada e atualizada automaticamente para você.
Recuperação de dados do armazenamento
O Duck usa seletores NgRx para ler dados do Armazenamento. Cada pato tem uma palheta auxiliar que aceita um seletor.
Vamos imaginar que nosso contador seja registrado como uma função NgRx com a tecla " contador ". Isso nos permitiria a seguinte configuração do seletor.
import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } }
Você pode assistir à demonstração no stackblitz.io .
O Duck permite acionar mutações de estado e consultar dados do Repositório. Você precisa de apenas um serviço "utilizado", que configura uma API conveniente para interagir com o armazenamento.
E finalmente
O NgRx Ducks também se integra perfeitamente ao Effects! MAS analisaremos isso em detalhes apenas no próximo artigo.
Se você está ansioso para descobrir isso agora, consulte o exemplo complexo, que também está disponível no stackblitz.io.
TL; DR
- O NgRx Ducks funciona como uma camada extra em cima do NgRx.
- Você pode integrar facilmente o NgRx Ducks aos projetos existentes.
- Pato
... gera automaticamente criadores de ação e funções redutoras
... torna desnecessários os enumeradores de ação e os tipos de união
... é uma fachada dinâmica que pode ser incorporada em um componente
fornece autotransmissão de tipo dinâmico; ações desculpas
... permite ler dados do armazenamento usando a API de seleção
. ... pode ser usado pelo Effects (consulte. Demo )
Isso é tudo pessoal!
Espero ter conseguido convencê-lo a experimentar o NgRx Ducks . Além disso, eu me pergunto o que você acha desta biblioteca. Se você tem alguma idéia, basta escrever no GitHub