Gerenciamento de estado Blazor: práticas recomendadas a serem consideradas

Quando falamos sobre Blazor, o estado é uma parte essencial de qualquer aplicativo que você cria com uma estrutura que inclui a interação do usuário. Considere um cenário em que um usuário deve fazer login para exibir dados confidenciais. No entanto, como o estado não é gerenciado corretamente, eles devem fazer login repetidamente sempre que recarregarem a página. Qual a probabilidade de eles continuarem usando o aplicativo no futuro? Não é muito provável, eu acho.

Para evitar esse tipo de capacidade de resposta ruim da interface do usuário e experiência ruim do usuário, os desenvolvedores devem implementar um gerenciamento de estado de Blazor eficaz e adequado. Dessa forma, os componentes Blazor usados para criar o aplicativo poderão se comunicar entre si e transferir efetivamente dados específicos de um componente pai para um componente filho.

Mas como funciona exatamente a Gestão do Estado em Blazor? Qual é a diferença entre um aplicativo WebAssembly Blazor e um aplicativo Blazor Server? Com este guia rápido, vamos nos aprofundar.

Try Ignite UI for Blazor

Um olhar mais atento sobre o gerenciamento de estado em seus aplicativos Blazor

Então, o que é Gestão de Estado em Blazor? Em essência, isso se refere ao processo de manipulação de dados + manutenção de um estado de interface do usuário (UI) responsivo. É extremamente vital por vários motivos:

• Ele permite que seu aplicativo Blazor mantenha seu estado atual mesmo se a conexão for interrompida ou perdida.
• Permite que ele se lembre de dados específicos do usuário.
• Sincroniza sua interface do usuário com os dados e qualquer alteração nos dados do aplicativo é sempre refletida.
• Facilitates communication between Blazor components.
• E ajuda a gerenciar a interatividade em tempo real do lado do cliente.

Se você quiser ver como será o processo, vejamos esta visualização simplificada + explicação:

Geralmente, o Gerenciamento de Estado de Blazor pode ser entendido como o controle e armazenamento sistemáticos de dados de aplicativos, que podem variar desde preferências do usuário e entradas de formulário até configurações globais e atualizações em tempo real. Como os componentes compartilham dados, eles fazem isso por meio de parâmetros, parâmetros em cascata ou serviços, mas também podem manter seu próprio estado local.

Às vezes, para executar o gerenciamento de estado adequado, é necessário implementar um contêiner de estado global. Embora sirva como um repositório centralizado para gerenciar dados compartilhados, também garante acesso e atualizações consistentes. Mas quais são as coisas que acionam atualizações de estado? Isso pode incluir interações do usuário, eventos ou alterações externas. Depois que as atualizações de estado são disparadas, Blazor componentes as assinam, renderizando a interface do usuário de acordo com as alterações.

Abaixo estão alguns casos de uso comuns em que você deve considerar o uso do gerenciamento de estado Blazor.

• Quando há troca de dados e interações entre vários componentes que não estão diretamente relacionados na hierarquia de componentes.
• Se você tiver dados que precisam ser compartilhados e acessados em diferentes partes do seu aplicativo e precisar rastrear o status de autenticação do usuário, autorização, funções etc.
• Quando você deseja atualizar a interface do usuário em resposta a interações do usuário, alterações de dados etc.
• Para configurações de aplicativos compartilhados ou configurações que vários componentes acessarão.
• Cache de dados para melhorar o desempenho e a capacidade de resposta do seu aplicativo Blazor quando os dados não são alterados com frequência.
• Para persistir dados específicos do usuário quando houver atualização de página, por exemplo, quando a página/aplicativo tiver carrinhos de compras, formulários de dados e outros.
• Para criar uma experiência de usuário personalizada com preferências específicas do usuário armazenadas – configurações de exibição, opções de layout e muito mais.
• Quando as atualizações em tempo real precisam ser distribuídas entre clientes e um servidor.
• Crie interfaces no estilo assistente de várias etapas em que cada etapa mantém seu estado, permitindo que os usuários naveguem para frente e para trás, preservando seu progresso.
• Também é útil ao manter filtros, critérios de classificação ou consultas de pesquisa aplicadas a grades ou listas de dados.

É claro que sempre considere a finalidade e a lógica específicas do aplicativo e como diferentes técnicas de gerenciamento de estado podem ajudá-lo a alcançá-lo de maneira mais suficiente.

Como usar o gerenciamento de estado no Blazor

Já discutimos Blazor muitas vezes e já descrevemos como ele funciona, mas, para resumir rapidamente, a estrutura permite que você crie aplicativos Web interativos usando habilidades puras em C# e .NET. Sem JavaScript aqui. Mas há duas maneiras de lidar com as interações cliente-servidor – uma maneira de criar aplicativos é usando o Blazor Server e a outra é Blazor WebAssembly (WASM). No Blazor Server, o aplicativo é executado no servidor e todas as atualizações da interface do usuário são buscadas para o cliente por meio da conexão do SignalR. Na verdade, isso o torna adequado para aplicações em tempo real com controle centralizado.

Por outro lado, Blazor WebAssembly é executado diretamente no navegador da web, permitindo a execução completa do lado do cliente. É ideal para cenários em que os aplicativos devem trabalhar offline ou com interação mínima com o servidor enquanto lidam com maior consumo de recursos do cliente.

Essas diferenças arquitetônicas também são refletidas no Blazor Server State Management e no Blazor WebAssembly State Management. Vamos examinar isso mais a fundo.

Blazor Server State Management

Em primeiro lugar, Blazor Server pode usar o SignalR para atualizações de estado em tempo real. Em geral, porém, o Gerenciamento de Estado em um aplicativo do Blazor Server é armazenado na memória em uma estrutura conhecida como circuito. Isso é bom, desde que não haja problemas de conexão ou alta latência de rede, porque buscar atualizações em tempo real pode se tornar problemático. Nesse cenário, Blazor tentará se reconectar ao mesmo circuito novamente. Mas se isso falhar e o atraso durar muito tempo, um novo circuito pode ser estabelecido, potencialmente causando a perda de dados cruciais.

Blazor WebAssembly State Management

Quando se trata de gerenciamento de estado em aplicativos WebAssembly Blazor, o estado é hospedado no navegador que a pessoa usa. Ele não depende da memória do servidor para gerenciamento de estado, portanto, a integridade do aplicativo não é afetada por problemas de latência ou conexão com a rede. No entanto, atualizar a página ou reabrir o aplicativo normalmente redefinirá o estado.

Por exemplo, imagine que você tenha um aplicativo Blazor com um formulário de várias páginas que usa o armazenamento local para preservar o estado entre as páginas. Dessa forma, o usuário pode ter botões para voltar e avançar sem enviar um formulário incompleto. Algo como um longo formulário de pesquisa.

Exemplo de gerenciamento de estado

Em ambos os casos, você deve pensar em executar a persistência de estado. Como a Microsoft destacou inicialmente,

“… Mantenha o estado em circuitos onde os usuários estão criando dados ativamente, não simplesmente lendo dados que já existem. Para preservar o estado entre circuitos, o aplicativo deve persistir os dados em algum outro local de armazenamento que não seja a memória do servidor. A persistência do estado não é automática. Você deve tomar medidas ao desenvolver o aplicativo para implementar a persistência de dados com estado. A persistência de dados normalmente é necessária apenas para o estado de alto valor que os usuários se esforçaram para criar."

Estes são alguns locais comuns onde persistir o estado:

• Server-side storage (Database)
• Lado do cliente (navegador)
• URL
• Serviço de contêiner de estado na memória

O aplicativo também pode contar com armazenamento do lado do servidor, especialmente quando se trata de persistência permanente de dados em diferentes usuários e dispositivos. As opções disponíveis seriam:

• Blob storage
• Key-value storage
• Relational database
• Armazenamento de mesa

Depois que os dados são salvos, o estado do usuário é retido e acessível em qualquer circuito.

Práticas recomendadas e abordagens para gerenciamento de estado de aplicativo Blazor

Depois de esclarecermos o que é Blazor State Management e como ele funciona em Blazor aplicativos WebAssembly e Blazor Server, vamos discutir algumas das melhores práticas e abordagens que nós da Infragistics exploramos e queremos destacar agora. Lembre-se de que cada abordagem serve a propósitos diferentes. Portanto, escolher uma abordagem e confiar em uma boa prática sempre depende das especificidades do seu projeto – requisitos do aplicativo, escopo do gerenciamento de estado necessário, complexidades no aplicativo Blazor e outros.

Parâmetros do componente ou valor em cascata

Blazor permite que você passe dados entre componentes usando parâmetros. Os componentes podem ter parâmetros que aceitam dados – esses parâmetros podem ser definidos pelo componente pai. Os parâmetros em cascata permitem que você passe os mesmos dados para uma hierarquia de componentes (de um componente pai para um componente filho) ou até mesmo encapsule CascadingValue em todo o contexto do aplicativo.

Quando isso é bom de usar?

O uso de parâmetros é útil ao compartilhar dados entre componentes pai e filho em uma estrutura hierárquica.

Salvando estados em URLs e parâmetros de consulta

Isso é muito importante porque permite que os usuários compartilhem o aplicativo e seu estado entre os usuários enviando uma URL (por exemplo, critérios de filtragem incorporados como parâmetros de consulta).

Quando isso é bom de usar?

Por exemplo, se você deseja permitir que os usuários acessem diretamente uma visualização ou configuração específica clicando em um URL salvo ou deseja criar links permanentes.

Mantendo o estado do componente por meio de campos e propriedades

Uma das melhores coisas sobre Blazor é que cada componente pode manter seu próprio estado, facilitando o gerenciamento do estado dentro de um componente usando campos e propriedades. Dessa forma, o estado do componente é isolado para o componente específico em que ele é definido.

Quando isso é bom de usar?

É ótimo quando você tem dados específicos de componentes que não precisam ser compartilhados com outros componentes.

Usando injeção de dependência e criando serviços

Ao criar serviços, você terá que usar a injeção de dependência para garantir que eles estejam disponíveis para todos os componentes. Essa abordagem é útil para compartilhar dados e estados que precisam ser acessíveis em vários componentes.

Quando isso é bom de usar?

Essa é uma ótima prática quando você deseja gerenciar um estado de todo o aplicativo, fornecer dados para diferentes componentes e fornecer um local central para gerenciar o estado do aplicativo.

Obtendo ajuda de bibliotecas de gerenciamento de estado de terceiros

Como desenvolvedor Blazor, você pode usar bibliotecas de terceiros, como bibliotecas baseadas em Fluxor, Blazor-State ou Redux, para gerenciar o estado em seu aplicativo. Eles são úteis porque oferecem uma solução mais estruturada e complexa para gerenciamento de estado + implementar padrões bem estabelecidos, como a arquitetura Flux.

Quando isso é bom de usar?

Se você deseja organizar e simplificar o gerenciamento de estado em aplicativos Blazor maiores e mais complexos.

Em conclusão...

Ter um gerenciamento de estado eficaz está no centro da criação de aplicativos Blazor responsivos, fáceis de manter e fáceis de usar. Ao implementar as melhores práticas e abordagens discutidas neste artigo, você pode garantir que seu projeto possa lidar com dados com eficiência, sincronizar perfeitamente as interações de componentes e fornecer uma melhor experiência do usuário. Mas lembre-se, não importa o que você opte, sempre considere as necessidades de estado do seu aplicativo para que a abordagem valha mais a pena a longo prazo.