Patrones de Gestión de Estado en Jetpack Compose
La gestión del estado es un aspecto crucial en el desarrollo de aplicaciones robustas y mantenibles con Jetpack Compose. Este artículo explora patrones esenciales y mejores prácticas para gestionar el estado de manera efectiva en tu UI con Compose, incluyendo estado inmutable, actualizaciones basadas en eventos y estrategias de pruebas.
Entendiendo los Patrones de Gestión de Estado
La gestión efectiva del estado en Compose requiere entender cómo estructurar y manejar los cambios de estado de una manera mantenible, testeable y escalable. Esto involucra varios patrones clave:
- Clases de Estado Inmutable: Define límites claros de estado y previene modificaciones no intencionadas
- Actualizaciones Basadas en Eventos: Centraliza las modificaciones de estado a través de eventos bien definidos
- Flujo de Estado Predecible: Asegura que los cambios de estado sigan un patrón consistente
- Arquitectura Testeable: Estructura el código para facilitar pruebas exhaustivas
Veamos cada uno de estos patrones en detalle.
1. Fuente Única de la Verdad
La base de una gestión efectiva del estado es mantener una fuente única de la verdad para el estado de tu aplicación. Este patrón ayuda a prevenir inconsistencias y hace que los cambios de estado sean más predecibles.
El patrón de Fuente Única de la Verdad implica usar una interfaz/clase sellada para representar todos los posibles estados de tu UI. Este enfoque proporciona varios beneficios:
- Seguridad de tipos: El compilador asegura que manejes todos los estados posibles
- Consistencia: Todo el estado de la UI proviene de una fuente autoritativa
- Predecibilidad: Las transiciones de estado son explícitas y rastreables
- Mantenibilidad: Cada estado es una instantánea completa de la UI
- Testeable: Los cambios de estado pueden ser fácilmente verificados
Aquí te mostramos cómo implementar este patrón:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| // Ejemplo del patrón Fuente Única de la Verdad
sealed interface UserUiState {
object Loading : UserUiState
data class Error(val message: String) : UserUiState
data class Success(val user: User) : UserUiState
}
class UserViewModel : ViewModel() {
private val _uiState = MutableStateFlow<UserUiState>(UserUiState.Loading)
val uiState: StateFlow<UserUiState> = _uiState.asStateFlow()
fun loadUser(userId: String) {
viewModelScope.launch {
_uiState.emit(UserUiState.Loading)
try {
val user = userRepository.getUser(userId)
_uiState.emit(UserUiState.Success(user))
} catch (e: Exception) {
_uiState.emit(UserUiState.Error(e.message ?: "Error desconocido"))
}
}
}
}
// El Composable puede manejar fácilmente todos los estados en un solo lugar
@Composable
fun UserScreen(viewModel: UserViewModel) {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
when (val state = uiState) {
is UserUiState.Loading -> LoadingSpinner()
is UserUiState.Error -> ErrorMessage(state.message)
is UserUiState.Success -> {
UserContent(state.user)
}
}
}
|
2. Inmutabilidad del Estado
El segundo patrón clave es mantener objetos de estado inmutables. Este enfoque es crucial para:
- Prevenir condiciones de carrera en operaciones concurrentes
- Hacer que los cambios de estado sean explícitos y rastreables
- Permitir una detección eficiente de cambios en Compose
- Simplificar la depuración y el testing
Aquí te mostramos cómo implementar la gestión de estado inmutable:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| // Define los modelos de dominio
data class SearchResult(
val id: String,
val title: String,
val description: String
)
// Define una clase de estado inmutable
data class SearchState(
val query: String = "",
val results: List<SearchResult> = emptyList(),
val selectedResult: SearchResult? = null,
val isLoading: Boolean = false
)
class SearchViewModel : ViewModel() {
private val _uiState = MutableStateFlow(SearchState())
val uiState: StateFlow<SearchState> = _uiState.asStateFlow()
fun onQueryChange(query: String) {
_uiState.update { it.copy(
query = query,
isLoading = query.isNotEmpty()
) }
searchResults(query)
}
fun onResultSelected(result: SearchResult) {
_uiState.update { it.copy(selectedResult = result) }
}
private fun searchResults(query: String) {
viewModelScope.launch {
try {
val results = searchRepository.search(query)
_uiState.update { it.copy(
results = results,
isLoading = false
) }
} catch (e: Exception) {
_uiState.update { it.copy(
results = emptyList(),
isLoading = false
) }
}
}
}
}
@Composable
fun SearchScreen(viewModel: SearchViewModel) {
val state by viewModel.uiState.collectAsStateWithLifecycle()
Column(modifier = Modifier.padding(16.dp)) {
SearchBar(
query = state.query,
onQueryChange = viewModel::onQueryChange
)
if (state.isLoading) {
CircularProgressIndicator()
} else {
LazyColumn {
items(
items = state.results,
key = { it.id }
) { result: SearchResult ->
SearchResultItem(
result = result,
isSelected = result == state.selectedResult,
onClick = { viewModel.onResultSelected(result) }
)
}
}
}
}
}
|
3. Actualizaciones Basadas en Eventos
El tercer patrón clave es usar eventos para hacer que las actualizaciones de estado sean predecibles. Este enfoque ayuda a:
- Centralizar la lógica de modificación de estado
- Hacer que las transiciones de estado sean explícitas y rastreables
- Asegurar que todas las actualizaciones de estado sigan un patrón consistente
- Simplificar el testing mediante la verificación del manejo de eventos
Aquí te mostramos cómo implementar actualizaciones basadas en eventos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
| // Los eventos representan todas las formas posibles de modificar el estado
// Beneficios:
// 1. Seguridad de tipos: El compilador asegura que todos los eventos sean manejados
// 2. Centralizado: Todas las modificaciones de estado pasan por un único punto
// 3. Rastreable: Fácil de registrar y depurar cambios de estado
// 4. Testeable: Los eventos pueden ser fácilmente simulados y verificados
sealed interface ProfileEvent {
object LoadProfile : ProfileEvent
data class UpdateBio(val newBio: String) : ProfileEvent
data class UpdateName(val newName: String) : ProfileEvent
object SaveProfile : ProfileEvent
}
data class ProfileState(
val name: String = "",
val bio: String = "",
val isLoading: Boolean = false,
val isSaving: Boolean = false,
val error: String? = null
)
class ProfileViewModel : ViewModel() {
private val _uiState = MutableStateFlow(ProfileState())
val uiState: StateFlow<ProfileState> = _uiState.asStateFlow()
// Punto único de entrada para todas las modificaciones de estado
// Esto asegura que:
// 1. Todos los cambios de estado se manejen consistentemente
// 2. Las modificaciones de estado sean fáciles de rastrear
// 3. Los efectos secundarios se manejen adecuadamente
fun onEvent(event: ProfileEvent) {
when (event) {
is ProfileEvent.LoadProfile -> loadProfile()
is ProfileEvent.UpdateBio -> updateBio(event.newBio)
is ProfileEvent.UpdateName -> updateName(event.newName)
is ProfileEvent.SaveProfile -> saveProfile()
}
}
// Cada manejador de eventos sigue el mismo patrón:
// 1. Actualizar el estado para mostrar la operación en progreso
// 2. Realizar la operación
// 3. Actualizar el estado con el resultado o error
private fun loadProfile() {
viewModelScope.launch {
_uiState.update { it.copy(isLoading = true, error = null) }
try {
val profile = profileRepository.getProfile()
_uiState.update { it.copy(
name = profile.name,
bio = profile.bio,
isLoading = false
) }
} catch (e: Exception) {
_uiState.update { it.copy(
isLoading = false,
error = e.message
) }
}
}
}
private fun updateBio(newBio: String) {
_uiState.update { it.copy(bio = newBio) }
}
private fun updateName(newName: String) {
_uiState.update { it.copy(name = newName) }
}
// Para operaciones asíncronas, manejamos los estados de carga y errores consistentemente
private fun saveProfile() {
viewModelScope.launch {
_uiState.update { it.copy(isSaving = true, error = null) }
try {
profileRepository.saveProfile(
name = uiState.value.name,
bio = uiState.value.bio
)
_uiState.update { it.copy(isSaving = false) }
} catch (e: Exception) {
_uiState.update { it.copy(
isSaving = false,
error = e.message
) }
}
}
}
}
@Composable
fun ProfileScreen(viewModel: ProfileViewModel) {
// La capa UI solo necesita:
// 1. Observar cambios de estado
// 2. Enviar eventos al ViewModel
// Esto crea una clara separación de responsabilidades
val state by viewModel.uiState.collectAsStateWithLifecycle()
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = state.name,
onValueChange = { viewModel.onEvent(ProfileEvent.UpdateName(it)) },
label = { Text("Nombre") }
)
OutlinedTextField(
value = state.bio,
onValueChange = { viewModel.onEvent(ProfileEvent.UpdateBio(it)) },
label = { Text("Biografía") }
)
Button(
onClick = { viewModel.onEvent(ProfileEvent.SaveProfile) },
enabled = !state.isLoading && !state.isSaving
) {
Text("Guardar Perfil")
}
state.error?.let { error: String ->
Text(
text = error,
color = MaterialTheme.colorScheme.error
)
}
if (state.isLoading) {
CircularProgressIndicator(Modifier.align(Alignment.CenterHorizontally))
}
}
}
|
4. Estrategia de Pruebas
El cuarto patrón clave es implementar una estrategia de pruebas integral. Las pruebas de la gestión de estado en Compose involucran tres aspectos principales:
- Pruebas de actualizaciones y transiciones de estado del ViewModel
- Verificación del manejo de eventos y efectos secundarios
- Asegurar que la UI refleje correctamente los cambios de estado
Aquí te mostramos cómo implementar una estrategia de pruebas completa:
Para pruebas de ViewModel:
- El estado inicial es correcto
- Los eventos producen las actualizaciones de estado esperadas
- Las operaciones asíncronas manejan estados de carga y error
- Las actualizaciones de estado son atómicas y consistentes
Para pruebas de UI:
- Los componentes reflejan el estado actual
- Las interacciones del usuario disparan los eventos correctos
- Los estados de carga y error se muestran adecuadamente
Aquí tienes un ejemplo completo mostrando estos patrones de testing:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| // La clase de prueba demuestra:
// 1. Configuración adecuada de pruebas con dependencias
// 2. Pruebas de diferentes flujos (éxito, error, actualizaciones inmediatas)
// 3. Verificación de transiciones de estado
class ProfileViewModelTest {
private lateinit var viewModel: ProfileViewModel
private lateinit var testRepository: TestProfileRepository
@Before
fun setup() {
testRepository = TestProfileRepository()
viewModel = ProfileViewModel(testRepository)
}
@Test
fun `cargar perfil - flujo exitoso`() = runTest {
// Dado
val testProfile = Profile(name = "Usuario Test", bio = "Bio Test")
testRepository.setProfile(testProfile)
// Estado inicial
assertThat(viewModel.uiState.value)
.isEqualTo(ProfileState())
// Cuando
viewModel.onEvent(ProfileEvent.LoadProfile)
// Entonces - Estado de carga
assertThat(viewModel.uiState.value.isLoading).isTrue()
assertThat(viewModel.uiState.value.error).isNull()
// Completar trabajo asíncrono
advanceUntilIdle()
// Entonces - Estado de éxito
with(viewModel.uiState.value) {
assertThat(isLoading).isFalse()
assertThat(name).isEqualTo(testProfile.name)
assertThat(bio).isEqualTo(testProfile.bio)
assertThat(error).isNull()
}
}
@Test
fun `cargar perfil - flujo de error`() = runTest {
// Dado
testRepository.setShouldError(true)
// Cuando
viewModel.onEvent(ProfileEvent.LoadProfile)
advanceUntilIdle()
// Entonces
with(viewModel.uiState.value) {
assertThat(isLoading).isFalse()
assertThat(error).isNotNull()
}
}
@Test
fun `actualizar nombre actualiza el estado inmediatamente`() = runTest {
// Cuando
viewModel.onEvent(ProfileEvent.UpdateName("Nuevo Nombre"))
// Entonces
assertThat(viewModel.uiState.value.name).isEqualTo("Nuevo Nombre")
}
}
// Tests de UI verifican el flujo completo:
// 1. Renderizado del estado inicial
// 2. Actualización de la UI con cambios de estado
// 3. Manejo de interacciones del usuario
@Test
fun `pantalla de perfil muestra indicador de carga y luego contenido`() {
// Crear regla de test
composeTestRule.setContent {
ProfileScreen(viewModel = viewModel)
}
// Verificar estado inicial de carga
composeTestRule.onNode(hasTestTag("loading")).assertIsDisplayed()
// Completar la carga
runTest {
advanceUntilIdle()
}
// Verificar contenido
composeTestRule.onNode(hasText("Usuario Test")).assertIsDisplayed()
composeTestRule.onNode(hasText("Bio Test")).assertIsDisplayed()
// Probar interacción
composeTestRule.onNode(hasText("Guardar Perfil")).performClick()
// Verificar que el evento de guardado fue manejado
verify(viewModel).onEvent(ProfileEvent.SaveProfile)
}
|
La combinación de gestión de estado basada en eventos y estados inmutables hace que las pruebas sean sencillas:
- Los eventos proporcionan puntos de entrada claros para probar cambios de estado
- Los estados inmutables hacen que las aserciones sean simples y confiables
- Las transiciones de estado son fáciles de verificar
- Las pruebas de UI pueden centrarse en reflejar el estado y las interacciones del usuario
Conclusión
La gestión efectiva del estado en Jetpack Compose requiere una combinación de patrones y mejores prácticas:
Fuente Única de la Verdad
- Usa clases de estado inmutable para representar todos los estados posibles
- Mantén la gestión de estado centralizada y predecible
- Haz que los cambios de estado sean explícitos y rastreables
Inmutabilidad del Estado
- Previene modificaciones no intencionadas con estado inmutable
- Usa data classes con copy para actualizaciones de estado
- Mantén la seguridad de hilos y la predecibilidad
Actualizaciones Basadas en Eventos
- Define eventos claros para todas las modificaciones de estado
- Centraliza la lógica de actualización de estado
- Haz que las transiciones de estado sean explícitas y verificables
Estrategia de Pruebas
- Prueba las transiciones de estado exhaustivamente
- Verifica que las actualizaciones de UI reflejen los cambios de estado
- Asegura el manejo adecuado de eventos
Siguiendo estos patrones, construirás aplicaciones Compose que son:
- Más mantenibles y fáciles de depurar
- Menos propensas a errores relacionados con el estado
- Más fáciles de probar y verificar
- Más escalables a medida que crece la complejidad
