Get best of the week

Angular: uma introdução clara ao NGRX

imagemO objetivo deste artigo é fornecer uma visão clara e clara do ngrx . Para fazer isso, explicarei o que você precisa saber e entender sobre o ngrx e depois o veremos em ação com exemplos de código simples e claros.

Aqui está uma lista de tópicos que discutiremos neste artigo:

  • O que é o ngrx
  • Benefícios do uso do ngrx
  • Desvantagens do uso do ngrx
  • Quando usar o ngrx
  • Ações, caixas de câmbio, seletores, armazenamento e efeitos

Continuação do artigo com um exemplo de uso: "Angular: um exemplo de uso do NGRX" .

O que é o NGRX


NGRX é um grupo de bibliotecas "inspiradas" pelo padrão Redux, que, por sua vez, são "inspiradas" pelo padrão Flux. Simplificando, isso significa que o padrão Redux é uma versão simplificada do padrão Flux, e NGRX é a versão angular / rxjs do padrão Redux.

O que quero dizer com a versão "angular / rxjs" do redux ... a parte "angular" é que o ngrx é uma biblioteca para uso em aplicativos angulares. Parte do "rxjs" é que a implementação do ngrx funciona em torno do fluxo rxjs . Isso significa que ele funciona usando vários operadores observáveis ​​e observáveis ​​fornecidos pelo rxjs.

O principal objetivo desse esquema é garantir o estado previsível do contêiner com base em três princípios básicos.


Vamos examinar os três princípios do modelo Redux e apontar os benefícios mais importantes que eles oferecem.

A única fonte da verdade


No caso da arquitetura redux / ngrx, isso significa que o estado de todo o aplicativo é armazenado na árvore de objetos no mesmo repositório.
Em uma loja? Falaremos sobre repositórios mais tarde, mas, para um entendimento geral, eles são responsáveis ​​por manter o estado e aplicar alterações quando forem informados sobre o assunto (quando a ação for enviada, também falaremos sobre eles posteriormente).

Os benefícios de ter uma fonte de verdade são numerosos, mas para mim o mais interessante (porque é isso que afetará qualquer aplicação angular) é o seguinte:

  • Quando você cria um aplicativo Angular, geralmente divide o estado e lida com vários serviços. À medida que seu aplicativo cresce, o rastreamento das alterações em seu estado se torna cada vez mais difícil e, como resultado, fica confuso, é difícil depurar e manter.Ter uma única fonte de verdade resolve esse problema, porque o estado é processado apenas em um objeto e em um local, portanto, depurar ou adicionar alterações se torna muito mais fácil.

Estado somente leitura


Você nunca mudará o estado diretamente; em vez disso, enviará ações que descrevem ações com o objeto (podem ser coisas como obter, adicionar, remover ou atualizar o estado).
Enviar uma ação? .. Falaremos sobre ações posteriormente, mas, para um entendimento geral, esses são os identificadores da operação no seu aplicativo e podem ser iniciados (ou enviados) para informar ao aplicativo para executar a operação que a ação representa.
Ao evitar a atualização do status de diferentes locais e ter um local centralizado para fazer alterações que respondem a ações específicas, você obtém muitos benefícios. Sem mencionar o mais importante:

  • Você sabe que qualquer mudança de estado ocorrerá em apenas um lugar. Isso tem um grande impacto na depuração e teste.
  • Você sabe que, se uma determinada ação é enviada, a operação no estado é sempre a mesma. Novamente, isso afeta diretamente a depuração e o teste.

As alterações são feitas com recursos simples.


Uma operação iniciada pelo despacho de uma ação será uma função simples chamada redutores dentro da estrutura da arquitetura redux.

Esses redutores (lembre-se de que são funções simples) recebem uma ação e um estado, dependendo da ação enviada (geralmente com a instrução switch), eles executam a operação e retornam um novo objeto de estado.

O estado no aplicativo redux é inalterado! Portanto, quando um redutor altera algo em um estado, ele retorna um novo objeto de estado.

Os benefícios do uso de funções puras são bem conhecidos, como o fato de poderem ser testados imediatamente se você passar os mesmos argumentos que obtém como resultado.

Essa abordagem também nos permite navegar entre diferentes instâncias de nosso estado usando as ferramentas de desenvolvimento Redux / ngrx e ver o que mudou entre as instâncias e quem mudou, entre outras coisas. Portanto, o uso de funções puras e o retorno de novas instâncias de estado também têm um grande impacto na depuração.

Mas a principal vantagem, na minha opinião, é que, ao vincular todos os dados de entrada de nossos componentes às propriedades do estado, podemos alterar a estratégia de detecção de alterações por push, e isso aumentará o desempenho do aplicativo.

Ótimo ... Então, quais são os benefícios do uso do NGRX?


Já mencionamos a maioria deles quando falamos sobre os princípios do modelo redux. Mas vamos observar as vantagens mais importantes do uso do modelo redux no aplicativo (na minha opinião):

  • , , .
  • redux , .
  • , , , , ngrx rxjs, .
  • ngrx, .

…


  • NGRX, , . , , , . , .
  • . , - , , , , , , . () rxjs .
  • NGRX Google, , , Angular ngrx. - , , .

NGRX


Assim, é geralmente aceito que o ngrx deve ser usado em projetos de médio / grande porte quando a administração do estado se torna difícil de manter. Algumas pessoas mais fanáticas dirão algo como "se você tem uma fortuna, então você tem NGRX".

Concordo que ele deve ser usado em projetos de médio ou grande porte quando você possui um estado significativo e muitos componentes que o utilizam, mas você deve considerar que o próprio Angular fornece muitas soluções de gerenciamento de estado e se você possui um forte Equipe de desenvolvimento angular, talvez você não precise se preocupar com o ngrx.

Ao mesmo tempo, acredito que uma forte equipe de desenvolvimento Angular também pode decidir incluir o ngrx na solução, porque eles conhecem toda a potência do modelo redux, bem como a força adicionada pelos operadores rxjs, e se sentem confortáveis ​​trabalhando com ambos ...

Se você esperava uma resposta simples, para decidir quando usar o ngrx, você não o entenderá e não confiará em quem lhe der essa resposta fora de sua organização ou grupo. A decisão depende do estudo dos prós e contras, do entendimento de sua equipe e da consideração de suas opiniões.

Ações NGRX, caixas de câmbio, seletores, armazenamento e efeitos


Estes são os blocos de construção básicos do fluxo ngrx. Cada um deles assume parte do processo de iniciar uma operação para alterar nosso estado e obter dados.

imagem

Na imagem, vemos o fluxo ngrx. Vamos explicar ...

  1. . , , , .
    …

    «» () . — , NGRX Action. Action' ( GetUserName):

    type (): , , . : '[User] Get User Login''.

    payload ( ): , . , . .
  2. , ( switch) , , .
    ...

    — , : . ngrx , , , , , .
  3. , - , . , - HTTP .
    ...

    ngrx , ngrx.

    Effects , - , , , , , .

    , API.

    , , (success, error ..), , ngrx.
    , ( ), «-» ( , ).
  4. . , ngrx , , .
    ...

    , , , .

    NGRX «» . , , .

    . . «store» , .

    ...

    Uma loja é um objeto (uma instância da classe Store ngrx) que combina o que mencionamos anteriormente (ações, redutores, seletores). Por exemplo, quando uma ação é enviada (usando a função de envio do objeto de armazenamento), é o armazenamento que encontra e executa o redutor correspondente.

    Ele também é detentor do estado do aplicativo.


Artigo continuado com exemplos de uso: "Angular: um exemplo de uso do NGRX" .

More articles:


All Articles