Ao trabalhar em um aplicativo Angular, não existe uma solução rápida e pronta para uso para persistência de dados. Como resultado, a experiência de desenvolver um aplicativo muito grande que requer muita comunicação de dados entre os componentes pode ser muito estressante.
Neste tutorial de gerenciamento de estado angular, mostraremos como usar NgRx , uma coleção de bibliotecas para extensões reativas, para gerenciar o estado em seu aplicativo Angular.
Aqui está o que vamos cobrir:
- Gerenciamento de estado em aplicativos front-end
- O que é NgRx?
- O que é NgRx Store?
- NgRx e Redux
- Usando estados de armazenamento, ações e redutores em NgRx
- Construindo um aplicativo Angular simples usando NgRx Store
Para acompanhar este tutorial, você deve ter:
- Uma compreensão básica do TypeScript
- Um editor de texto (usaremos VS Code )
- Uma compreensão sólida do Angular
Gerenciamento de estado em aplicativos front-end
Ao contrário dos aplicativos de back-end, que usam bancos de dados para gerenciamento de estado, os aplicativos de front-end precisam de algum tipo de mecanismo para lidar com dados. Esses dados podem variar de respostas do servidor obtidas a partir de solicitações HTTP a dados de entrada de formulários e rotas do usuário.
É uma boa prática compor todo o estado do seu aplicativo em um armazenamento central para facilitar o gerenciamento e a comunicação de dados. Então, basicamente, nosso estado é uma representação de nosso aplicativo que realmente reside na loja.
O que é NgRx?
NgRx é um grupo de bibliotecas angulares para extensões reativas e gerenciamento de estado. Ele torna o desenvolvimento Angular mais fácil, simplificando o estado do aplicativo em objetos e reforçando o fluxo de dados unidirecional.
Um sistema de gerenciamento de estado completo deve permitir que você modele um estado-por exemplo, crie uma representação simples de como o estado deve ser, atualize seu valor, monitore o estado quando o valor muda e recupera os valores do estado.
As bibliotecas incluídas no pacote NgRx incluem:
Para este tutorial, vamos nos concentrar principalmente na biblioteca da Loja. Especificamente, demonstraremos como os componentes angulares podem obter valores de uma única loja.
O que é NgRx Store?
A NgRx Store é um sistema de gerenciamento de estado inspirado no Redux que permite usar observáveis para gerenciar o estado em um aplicativo Angular. A principal vantagem de usar o NgRx Store é a capacidade de armazenar todos os estados em uma única árvore que pode ser acessada de qualquer parte do aplicativo.
NgRx e Redux
NgRx usa o padrão Redux , que é composto de três conceitos principais:
- Store, um armazenamento central que mantém todo o estado do aplicativo
- Ação, que descreve todas as mudanças no estado do aplicativo
- Redutores, que unem a loja e as ações usando a ação definida para realizar uma transição de estado, dependendo da ação
O diagrama acima ilustra claramente o conceito de Redux e mostra como ele gerencia o estado. Observe que o NgRx também usa esse padrão.
Digamos, por exemplo, que temos um botão em um determinado componente que, ao ser clicado, altera o valor do cabeçalho da página. Usaremos o NgRx para lidar com isso.
Primeiro, o componente despacha uma ação. A ação então vai para o redutor. O redutor é um método simples que pega o estado atual e a ação como um parâmetro e retorna um novo estado. Quando o redutor retorna o novo estado, o componente se inscreve em um seletor para obter o novo valor.
O estado nunca é alterado diretamente. Em vez disso, o redutor sempre cria um novo estado. Isso é conhecido como imutabilidade.
Usando estados de armazenamento, ações e redutores em NgRx
Nesta seção, demonstraremos como usar estados de armazenamento, ações e redutores para simplificar o gerenciamento de estados no Angular.
Estado da loja
Uma loja é basicamente um objeto JavaScript que contém os dados que usaremos em nosso aplicativo.
Uma loja simples assume o seguinte formato:
const state={ pessoas: [ { nome:"Wisdom Ekpot", idade: 10 }, { nome:"John Cat", idade: 40 }, { nome:"James John", idade: 11 } ], Descrição do livro: { nome:"Nome do livro", autor:"Wisdom Ekpot" }
}
Ações
Ações são métodos despachados pelo componente quando um evento é chamado.
Aqui você pode definir um tipo e também a carga útil que ele enviará:
const ChangeNameAction={ tipo:"Alterar nome", nome:"Sabedoria"
}
Redutores
O método createReducer lida com as transições de estado.
Para acessar o estado, temos que importar o estado inicial para o arquivo redutor. Para acionar uma ação, usamos o evento on , que leva o nome da ação como parâmetro:
const _reducer=createReducer ( Estado inicial, on (nameOfAction, (state, action)=> { Retorna { ...Estado, someState: action.anyState } })
)
Criação de um aplicativo Angular simples usando NgRx Store
Comece configurando um novo aplicativo Angular. Se você não tiver o Angular instalado em sua máquina local, pode abrir seu terminal e executar npm i @ angular/cli-g . O sinalizador -g garantirá que a CLI Angular é instalado globalmente em sua máquina local.
Para criar um novo projeto, execute ng new course-list em seu terminal. Após a conclusão da instalação, vá para o projeto executando cd course-list .
Em seguida, instale o NgRx Store em seu projeto executando o seguinte comando no terminal (certifique-se de que seu terminal esteja no diretório de trabalho do projeto):
npm install @ ngrx/store--save
Após a instalação, abra seu aplicativo no VS Code e forneça o aplicativo usando o seguinte comando:
código
. && ng servir
Crie um diretório store dentro do seu diretório src/app . É aqui que todos os recursos do NgRx serão adicionados.
Dentro do diretório store , crie um diretório models e, dentro dele, um arquivo courseItem.model.ts . Definiremos nossa interface para nossa lista de cursos neste arquivo:
exportar interface CourseItem { id: string; departamento: string; nome: string;
}
A seguir, crie um diretório Actions dentro do diretório store . É aqui que todas as ações do NgRx serão definidas.
Crie um arquivo course.action.ts dentro do diretório actions e adicione o seguinte:
importar {Action} de'@ ngrx/store';
importar {CourseItem} de'../models/courseItem.model';
export enum CourseActionType { ADD_ITEM='[COURSE] Adicionar Curso',
}
export class AddItemAction implementa Action { readonly type=CourseActionType.ADD_ITEM; //adiciona uma carga útil opcional construtor (carga pública: CourseItem) {}
}
exportar tipo CourseAction=AddItemAction;
Começamos importando a ação NgRx da loja e depois também importamos a interface coureitem que definimos. Isso tem muitos casos de uso; aqui, vamos usá-lo como uma validação simples para nossas ações.
Usaremos o enum TypeScript para definir uma ação que nos permite declarar um conjunto de constantes nomeadas, como uma coleção de valores numéricos ou de string relacionados.
Depois de fazer isso, criamos uma AddItemAction , que implementa a ação NgRx. Cada Ação NgRx tem duas propriedades principais: um tipo e uma carga opcional. O tipo geralmente é uma string somente leitura que representa o tipo de ação que enviaremos para a loja. Como se trata de uma classe, podemos aceitar uma carga útil opcional usando o construtor de classe.
A seguir, exportaremos um tipo CourseAction , cujo valor será a ação AddItemAction .
Com isso definido, precisamos criar nosso redutor para ajudar na transição de stateX para stateY .
Vamos criar um diretório reducers dentro do diretório store . Dentro do diretório reducers , crie um arquivo course.reducer.ts e adicione o seguinte:
//importar a interface
importar {CourseItem} de'../models/courseItem.model';
import {CourseAction, CourseActionType} de'../actions/course.action';
//cria um estado inicial fictício
const initialState: Array =[ { id:'1', departamento:'Engenharia Informática', nome:'Programação C ++', },
];
função de exportação courseReducer ( estado: Array =initialState, ação: CourseAction
) { switch (action.type) { case CourseActionType.ADD_ITEM: return [... state, action.payload]; padrão: estado de retorno; }
}
A primeira coisa a fazer é importar o modelo courseItem , a ação CourseAction e a ação CourseActionType . Por enquanto, criaremos um estado inicial que usará a interface CourseItem para validação.
Criamos uma função redutora que recebe um estado e uma ação como parâmetro. O parâmetro state será um tipo de array, cujo valor será o estado inicial definido que acabamos de criar. Usamos a instrução JavaScript para verificar se o tipo de ação está definido em nosso arquivo de ações. Se existir, ele retorna o estado e a carga útil da ação. Caso contrário, ele apenas retorna o estado.
Lembre-se de que o objetivo do NgRx ou de qualquer sistema de gerenciamento de estado é manter todo o estado do aplicativo em um único armazenamento para que possa ser acessado de qualquer parte do aplicativo. Vamos criar um arquivo state.model.ts dentro do diretório de modelos.
Adicione o seguinte ao arquivo que você acabou de criar:
importar {CourseItem} de'./courseItem.model'; interface de exportação State { cursos somente leitura: Array ;
}
Agora temos que registrar o NgRx em nosso arquivo raiz app.modules.ts . Importe CourseReducer e registre-o na matriz de importações. Também importaremos o Angular FormsModule , que usaremos em breve:
import {CourseReducer} de'./store/reducers/course.reducer';
import {FormsModule} de'@ angular/forms';
Após importar o módulo, registre-o no array importações :
importações: [ FormsModule, StoreModule.forRoot ({ curso: CourseReducer, }), ],
Agora podemos usar NgRx em nossos componentes. Vamos começar modificando nosso arquivo raiz app.component.ts para o seguinte:
import {Component, OnInit} de'@ angular/core';
importar {Store} de'@ ngrx/store';
import {Observable} de'rxjs';
importar {CourseItem} de'./store/models/courseItem.model';
importar {AppState} de'./store/models/app-state.model';
@Componente({ seletor:'app-root', templateUrl:'./app.component.html', styleUrls: ['./app.component.css'],
})
export class AppComponent implementa OnInit { courseItems $: Observable >; construtor (armazenamento particular: Store ) {} ngOnInit (): void { this.courseItems $=this.store.select ((store)=> store.course); }
}
Trazemos RxJS Observables , nossa interface courseItem definida e o estado do nosso aplicativo. Definimos courseItems $ como um tipo de observável, que será um tipo de array. Em seguida, definimos o valor de courseItems $ para a loja retornada.
Agora podemos usar isso em nosso modelo. Excluiremos todo o nosso modelo de HTML em app.component.html e o converteremos para o seguinte:
Testando NgRx
- {{course.department}}
Podemos usar async para inscrever-se automaticamente em um observável e executar nosso aplicativo usando o comando ng serve . Executar o aplicativo no navegador exibirá o seguinte:
Isso é retornado porque não chamamos nenhum redutor, então ele apenas retorna o estado.
Adicionando um curso
A próxima funcionalidade que abordaremos é adicionar um curso à nossa lista de cursos. Criaremos um formulário simples para os usuários adicionarem um novo curso.
Para uma interface de usuário de boa aparência, usaremos Bootstrap . Vamos adicionar o Bootstrap CSS CDN ao nosso app/index.html :
CourseList
Para criar um formulário simples para adicionar o nome do curso e o departamento em nossa interface de usuário, vamos modificar nosso arquivo app.component.html da seguinte maneira:
Gestão Angular do Estado
- {{course.name}}: {{course.department}}
Este é um refatorador de código básico. Aqui, estamos usando o formulário Angular ngModel para obter os valores do formulário. Em seguida, precisamos importar NgForm em nosso arquivo TypeScript e criar um método para despachar a AddItemAction :
import {NgForm} de'@ angular/forms';
import {AddItemAction} de'./store/actions/course.action'; //crie o método para adicionar um novo curso e, em seguida, redefina o formulário addCourse (form: NgForm) { this.store.dispatch (novo AddItemAction (form.value)); form.reset ();
}
Agora podemos adicionar um novo curso usando o formulário que criamos:
Conclusão
Trabalhar com aplicativos de grande escala requer uma boa arquitetura e estrutura organizada. Ferramentas de gerenciamento de estado, como NgRx, podem ajudá-lo a manter uma base de código legível à medida que seu aplicativo aumenta.
Quer você seja um desenvolvedor Angular ou não, compreender os conceitos básicos por trás do gerenciamento de estado tornará mais fácil usar ferramentas como Redux e Vuex em seus projetos.
O código-fonte deste artigo está disponível em GitHub .
A postagem Gerenciamento de estado angular simplificado com NgRx apareceu primeiro no LogRocket Blog .
