State Management (Jetpack Compose + StateFlow)

[krschan]

State Management (Jetpack Compose + StateFlow)

This discussion provides a detailed breakdown of how the frontend manages state using Jetpack Compose and StateFlow. Proper state management ensures that the UI updates dynamically based on user interactions and API responses.

---

1️⃣ Why Use StateFlow for Authentication?

In our frontend architecture, we use StateFlow inside AuthViewModel.kt to manage authentication state. This allows us to:

• Maintain a reactive UI: Any changes in state automatically trigger recomposition.
• Decouple UI logic from business logic: ViewModel handles state updates, keeping screens clean.
• Improve performance: Only UI components that depend on state changes are recomposed.

✅ Why not use LiveData instead of StateFlow?

• StateFlow is fully compatible with Jetpack Compose.
• StateFlow is designed for UI state management and is more efficient for Compose than LiveData.
• Unlike LiveData, StateFlow has an initial value and does not require lifecycle-awareness in Compose.

---

2️⃣ Understanding AuthState (Sealed Class)

We use a sealed class in AuthViewModel.kt to define different authentication states:

sealed class AuthState {
    object Idle : AuthState()
    object Loading : AuthState()
    object Success : AuthState()
    data class Error(val message: String) : AuthState()
}

Each state serves a purpose:

• Idle: Default state when no authentication action has been triggered.
• Loading: The UI enters a loading state while waiting for an API response.
• Success: Triggered when authentication succeeds.
• Error: Stores an error message when authentication fails.

✅ Why use a sealed class instead of a simple Boolean?

• Allows more expressive state management (loading, error, success).
• Ensures type safety, as only predefined states can exist.
• Improves code readability compared to multiple Boolean flags.

---

3️⃣ How StateFlow Updates the UI

The authState is observed in RegisterScreen.kt using collectAsState(). This allows the UI to reactively update based on authentication state.

🔹 How AuthState is updated in AuthViewModel.kt

class AuthViewModel(private val userRepository: UserRepository) : ViewModel() {

    private val _authState = MutableStateFlow<AuthState>(AuthState.Idle)
    val authState: StateFlow<AuthState> = _authState

    fun register(context: Context, username: String, email: String, phoneNumber: String, password: String, confirmPassword: String) {
        viewModelScope.launch {
            _authState.value = AuthState.Loading

            val response = userRepository.register(username, email, phoneNumber, password, confirmPassword)
            val jwtResponse = response.body()

            if (jwtResponse != null && response.isSuccessful && jwtResponse.token != null) {
                DataStoreManager.saveToken(context, jwtResponse.token)
                _authState.value = AuthState.Success
            } else {
                val errorMessage = jwtResponse?.message ?: "Registration failed"
                _authState.value = AuthState.Error(errorMessage)
            }
        }
    }
}

✅ How does this benefit the UI?

• Prevents UI from freezing during API calls (Loading state).
• Displays error messages dynamically when authentication fails.
• Ensures a smooth user experience by handling states efficiently.

---

4️⃣ Using StateFlow in RegisterScreen.kt

🔹 Listening to authState in Jetpack Compose

val authState by authViewModel.authState.collectAsState()

LaunchedEffect(authState) {
    when (authState) {
        is AuthState.Success -> {
            Log.d("RegisterScreen", "Registration successful! Token stored.")
        }
        is AuthState.Error -> {
            val errorMsg = (authState as AuthState.Error).message
            Log.e("RegisterScreen", "Error from backend: $errorMsg")
        }
        else -> {}
    }
}

✅ Why use LaunchedEffect(authState)?

• Ensures that UI updates only when authState changes.
• Prevents unnecessary recompositions in Jetpack Compose.

---

5️⃣ State Management Flow Diagram

Here’s a visual representation of how state flows from the ViewModel to the UI.

sequenceDiagram
    participant UI as RegisterScreen.kt
    participant ViewModel as AuthViewModel.kt
    participant Repository as UserRepository.kt
    participant API as ApiService.kt
    participant Backend as Backend

    UI->>ViewModel: User clicks Register
    ViewModel->>ViewModel: _authState.value = AuthState.Loading
    ViewModel->>Repository: Calls userRepository.register()
    Repository->>API: Sends RegisterRequest
    API->>Backend: Processes request
    Backend-->>API: Returns JwtResponse or error
    API-->>Repository: Sends response
    Repository-->>ViewModel: Passes JwtResponse or error message
    ViewModel->>UI: Updates authState (Success/Error)
    UI-->>User: Displays result (Success/Error message)

Loading