How to update UI state using stateIn in ViewModel jetpack compose

Question

I have a ProfileViewModel where I load the user profile when the user lands on the screen. To achieve this, I use stateIn so that the profile is fetched automatically.

Now, I want to modify profileUiState to:

Show isLoading = true before calling logoutApi.logout().
Call logoutApi.logout().
Show isLoading = false and reload the profile data after logout.

Here’s my current ViewModel:

class ProfileViewModel(
    private val userInfoApi: UserInfoApi,
    private val logoutApi: LogoutApi,
) : ViewModel() {

    private val eventChannel = Channel<ProfileUiEvent>()
    val events = eventChannel.receiveAsFlow()

    var profileUiState = flow {
        val result = userInfoApi.getUserInfo()
        emit(
            result.fold(
                onSuccess = {
                    ProfileUiState(userInfo = it, isLoading = false)
                },
                onFailure = {
                    ProfileUiState(errorMessage = it.message, isLoading = false)
                }
            )
        )
    }.stateIn(
        scope = viewModelScope,
        started = SharingStarted.Lazily,
        initialValue = ProfileUiState(isLoading = true)
    )

    fun onAction(action: ProfileUiEvent) {
        viewModelScope.launch {
            eventChannel.send(action)
        }
    }

    fun logoutUser() {
        viewModelScope.launch {
             // update the logic in here for logout
            profileUiState
        }
    }
}

I want to avoid anti-patterns few of them and I read from this blog like :

Calling getUserInfo() inside init {} of viewmodel.
Using LaunchedEffect in Compose to trigger an API call.

How can I modify profileUiState properly to handle logout while keeping this approach?

vasberc · Accepted Answer · 2025-05-04 06:50:55Z

0

------edit------

Example:
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.onStart
import kotlinx.coroutines.flow.receiveAsFlow
import kotlinx.coroutines.flow.stateIn
import kotlinx.coroutines.flow.update

class ProfileViewModel(
    private val userInfoApi: UserInfoApi,
    private val logoutApi: LogoutApi,
) : ViewModel() {

    private val eventChannel = Channel<ProfileUiEvent>()
    val events = eventChannel.receiveAsFlow()

    private val _profileUiState = MutableStateFlow(ProfileUiState())
    val profileUiState = _profileUiState
        .onStart {
            val result = userInfoApi.getUserInfo()
            result.fold(
                onSuccess = { success ->
                    _profileUiState.update { ProfileUiState(userInfo = success, isLoading = false) }
                },
                onFailure = { failure ->
                    _profileUiState.update {
                        ProfileUiState(
                            errorMessage = failure.message,
                            isLoading = false
                        )
                    }
                }
            )
        }
        .stateIn(
            scope = viewModelScope,
            started = SharingStarted.Lazily,
            initialValue = ProfileUiState(isLoading = true)
        )

    fun onAction(action: ProfileUiEvent) {
        viewModelScope.launch {
            eventChannel.send(action)
        }
    }

    fun logoutUser() {
        viewModelScope.launch {
            // call the logout and handle the result
            _profileUiState.update { /*Update here the state*/ }
        }
    }
}

Now you have a State flow that when the collector is subscribed it calls the action inside the onstart and then you can update it whenever you like through the

_profileUiState

edited May 4 at 6:50

answered Apr 3 at 16:33

vasberc

2064 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vivek Modi Apr 3 at 16:53

Init function is not good when we need to test the viewmodel. Read more about it here proandroiddev.com/…

vasberc Apr 3 at 18:53

I agree but in your case you want to call an api in the initial load of the screen and then you need to modify the state after calling an other api.

vasberc Apr 3 at 19:02

Maybe you could try to separate the api call from the screen state and have an other MutableStateflow to observe the state. And keep the stateIn to load the data

Vivek Modi Apr 3 at 21:39

Can you give me example please?

vasberc Apr 4 at 5:52

I edited my answer with an example

|

Collectives™ on Stack Overflow

How to update UI state using stateIn in ViewModel jetpack compose

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related