Injeção de Dependência no Blazor

O Blazor possuí um Injetor de Dependências nativo, baseado no Injetor de Dependências do próprio ASP.NET Core. Nesse artigo iremos ver como utilizar Injeção de Dependência (ou DI) no Blazor.

Para isso vamos utilizar uma aplicação Blazor já existente. Qualquer dúvida dê uma olhada nesse artigo, que mostra como criar um novo projeto Blazor usando o template do Visual Studio.

DI (Dependency Injection)

Não vou explicar o que é Injeção de Dependência a fundo. Se você não conhece o conceito, sugiro que procure material teórico sobre o assunto. DI não é só importante para Blazor, é importante em qualquer tecnologia de desenvolvimento de software.

Mas se você não está familiarizado com o termo, basta saber que Injeção de Dependência é um padrão que viabiliza o desacoplamento entre partes da nossa aplicação. Em vez de criar uma dependência direta entre duas partes da aplicação, nós injetamos essa dependência no momento da execução do software.

A Injeção de Dependência é útil no Blazor, assim como é útil em qualquer aplicação em que você queira adotar boas práticas de desenvolvimento. Mas vamos citar aqui as duas principais razões pelas quais você deve usar Injeção de Dependência no Blazor:

• Compartilhar uma única instância de um serviço, entre vários componentes. Isso é possível utilizado um conceito chamado Singleton, que veremos mais adiante.

• Desacoplar os componentes das implementações concretas dos nossos serviços. Ou seja, em vez do meu componente ter acesso direto ao serviço DataAccess, com o DI o componente terá acesso à interface IDataAccess. Isso facilita muito a adoção de Testes Unitários.

Na prática um Injetor de Dependências funciona como um dicionário. Nós registramos no Injetor a classe e a interface (DataAccess IDataAccess). E toda vez que um componente precisar de um IDataAccess, o Injetor deverá retornar uma instância do DataAccess.

Registrando Dependências

O Registro das Dependências devem ser feitos na classe Startup. Como você pode ver na Figura 1, temos um método ConfigureServices, que recebe como parâmetro um IServiceCollection. É através dessa coleção de serviços que podemos registrar nossas dependências, para que o Injetor resolva em tempo de execução.

Figura 1: Registrando Dependências

Lifetimes

No exemplo da Figura 1 estamos registrando nossa dependência como um Singleton. Temos basicamente três possíveis Lifetimes, que podem ser utilizados com Injeção de Dependência. São eles:

• Singleton: O DI cria uma única instância do serviço, que será compartilhada por todos os componentes da aplicação onde o serviço for injetado. Basicamente teremos apenas uma instância de um Singleton em toda a aplicação.

• Transient:Toda vez que o componente solicitar uma instância de um serviço Transiente ao DI, ele irá receber uma nova instância do serviço. É como executar um new Classe(), toda vez que precisar do Serviço.

• Scoped: O Scoped significa que a instância do serviço será única para cada usuário da aplicação. Isso só faz sentido em aplicações Web rodando em um servidor, onde vários usuários interagem com a mesma aplicação (que é o caso do Blazor server-side). No caso do Blazor (client-side), a aplicação roda no browser, via WebAssembly, então o Scoped tem o mesmo efeito do Singleton.

Serviços Nativos

O Blazor nos oferece três serviços default, que já vêm automaticamente registrados no injetor de dependência. São eles:

• HttpClient (Singleton) – Serviço para realizar requisições HTTP. Esse serviço é muito usado para que nossa aplicação Blazor se comunique com APIs em Backend.

• IJSRuntime (Singleton) – Representa a instância de um runtime Javascript, para onde todas as chamadas Javascript serão disparadas. Isso tem a ver com o recurso de Javascript Interop que existe no Blazor, para podermos interagir com Javascript.

• NavigationManager (Singleton) – Contém métodos auxiliares para trabalharmos com URLs. É um serviço muito útil na questão de navegação na aplicação.

Injetando Dependências

Para injetar dependências em um Componente do Blazor, usamos a diretiva @inject. No projeto de exemplo, abra o componente FetchData.razor, e veja que nele estamos injetando o serviço WeatherForecastService (Figura 2).

Figura 2: Injetando Serviço HttpClient no Componente

Note que para injetar um serviço nós primeiro definimos o nome do Serviço que será injetado, e em seguida o nome da Propriedade do Componente que irá receber a instância do Serviço. Nós podemos injetar quantos serviços forem necessários em um único componente.

Se você preferir também é possível injetar a dependência diretamente na propriedade, sem precisar usar a diretiva @inject. Basta decorar a propriedade com o atributo Inject, como mostra o exemplo da Figura 3.

Figura 3: Injetando Dependência com o atributo Inject direto na propriedade

E por fim, também podemos injetar dependência de um serviço dentro do outro, nesse caso usando o próprio construtor da classe. Veja por exemplo o caso do Serviço DataAccess na Figura 4. Note que o DataAccess depende do HttpClient.

Figura 4: Injetando dependência dentro de um serviço pelo construtor

Essa forma de injeção de dependência é a mais comum e utilizada, principalmente em outros tipos de aplicação ASP.NET. Uma das belezas do injetor de dependência é que não importa quantos níveis de dependência os nossos serviços tenham, o DI vai resolver recursivamente todas as dependências, desde que todas estejam devidamente registradas lá no Startup.

Espero que esse artigo tenha sido útil. Grande Abraço e até o próximo!

Publicidade