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
O
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
