Introdução ao padrão MVI no desenvolvimento Android

Afinal o que é o padrão MVI?

MVI é um dos mais novos padrões de arquitetura para Android, inspirado na natureza unidirecional e cíclica da estrutura Cycle.js.

O MVI funciona de maneira muito diferente em relação aos padrões MVC, MVP ou MVVM.

Basicamente consiste em três principais componentes:

Model : representa o estado. É representado por uma classe imutável para garantir que o fluxo de dados seja unidirecional e que o estado não seja alterado em nenhum outro lugar no aplicativo, se tornando a única fonte de verdade [single source of truth]

View : representa a camada de interface com o usuário. Entrega as ações do usuário e atualiza a interface refletindo as mudanças de estados recebidas.

Intent : são as ações desencadeados pelo usuário. [Não confunda com o Android Intent.] São capturadas por meio da interação do usuário com a View.

Entendendo o Fluxo de dados no MVI

1. A View é renderizada com base no estado inicial da classe UiState

2. Quando uma interação do usuário ocorre, a View envia essa ação para a viewModel.

3. A ação recebida gera um evento que é processado e seu resultado deste processamento emite um novo estado.

4. O novo estado é imediatamente refletido na View.

Representando Estados

 data class LoginUiStates( 
 val isSuccessLogin : Boolean = false, 
 val allFieldsAreFilled : Boolean = false, 
 val name:String = "", 
 val pass:String = "", 
 val isNameError : Boolean = false, 
 val nameErrorHint : String = "Digite seu nome", 
 val isPassError : Boolean = false, 
 val passErrorHint : String = "A senha deve conter 4 dígitos"
)

Representando Eventos

sealed class LoginEvent { 
 data class ValidateNameField(val name: String) : LoginEvent() 
 data class ValidatePassField(val pass: String) : LoginEvent() 
 object ValidateLogin : LoginEvent() 
}

Exemplo de uma implementação na viewModel usando flow:

private val _uiState: MutableStateFlow<LoginUiStates> = 
 MutableStateFlow(LoginUiStates.Empty) 

var uiSTate: StateFlow<LoginUiStates> = _uiState  

private val actions = MutableSharedFlow<LoginEvent>()

A cada evento recebido nossa View invoca o método onEvent da viewModel :

 fun onEvent(event: LoginEvent) { 
 viewModelScope.launch { 
  actions.emit(event) 
 } 
 }

A cada evento emitido nossa viewModel desencadeia uma ação, e a partir do resultado atualizamos o estado:

private fun handleEvents() { 
 viewModelScope.launch { 
  actions.collect { event -> 
      when (event) { 
          is LoginEvent.ValidateLogin -> validatingLogin() 
          is LoginEvent.ValidateNameField -> validateNameField(event) 
          is LoginEvent.ValidatePassField -> validatePassField(event)
      } 
  } 
} 
}

Ação desencadeada por um evento

private fun validatePassField(event: LoginEvent.ValidatePassField) { 
 _uiState.update { it.copy(pass = event.pass) } 
 if (event.pass.isNotEmpty() && event.pass.length > 4)  
_uiState.update { it.copy(isPassError = false) } 
 else _uiState.update { it.copy(isPassError = true) } 
}

Benefícios do MVI com Jetpack Compose

1. Separação de responsabilidades: O MVI divide as responsabilidades entre modelo, view e viewModel, tornando o código mais modular e fácil de entender.

2. Testabilidade aprimorada: Como o estado é imutável e a lógica de negócio é isolada na ViewModel, os testes se tornam mais simples e confiáveis.

3. Previsibilidade do fluxo de dados: O fluxo unidirecional do MVI garante que o estado seja atualizado de maneira consistente, tornando mais fácil rastrear o fluxo de dados no aplicativo.

4. Reprodutibilidade do estado: Com o MVI, o estado do aplicativo é reprodutível, o que significa que é possível reproduzir determinados estados para depuração e correção de bugs e testes de UI.

Conclusão

O padrão MVI oferece uma ótima opção de padrão arquitetural quando utilizamos o Jetpack Compose. Ele ajuda a separar as responsabilidades, tornar o código mais testável e oferecer um fluxo de dados previsível.

Link : https://github.com/JoaoSantosBH/MoviesCompose

Referencias:

https://medium.com/swlh/mvi-architecture-with-android-fcde123e3c4a

https://www.kodeco.com/817602-mvi-architecture-for-android-tutorial-getting-started