[Kotlin][Android] SharedFlow와 StateFlow 활용하기 (feat. UIState 활용하여 데이터 표시하기)

안녕하세요 👋

 

이전 포스팅에서 LiveData를 Coroutine Flow로 변경하여 적용하는 방법을 알아보았는데요

관련 포스팅은 아래 포스팅을 참고해 주세요 :)

 

[Kotlin][Android] 안드로이드 Coroutine Flow 적용하기 (2) ( LiveData를 Flow로 변경하기 : LiveData 와 Flow 비교

오늘은 SharedFlow와 StateFlow를 활용하여 화면을 어떻게 구성하는지

UIState로 관리를 어떻게 하는지 한번 알아보도록 하겠습니다!

 

먼저 Data를 받아올때 결과에 대한 Sealed class를 하나 만들어줍니다.

 

sealed class DataResult<T> {
    data class Success<T>(val data: T) : DataResult<T>()
    data class Exception<T>(val message: String) : DataResult<T>()
}

이름 그대로 Success 때는 정보를 성공적으로 받아온 상태이며 Exception상태는 예외가 발생한 상태입니다.

(상황에 따라 Fail , Loading 등을 추가하여 많이 사용하나 저는 간단한 예제이기에 예외처리에 대해서만 정의하였습니다.)

---

class MainRepositoryImpl @Inject constructor(
    private val userDao: UserDao,
) : MainRepository {
    override suspend fun insertUser(user: UserEntity) {
        userDao.addUser(user)
    }

    override suspend fun getAllUser() = flow<DataResult<List<UserEntity>>> {
        emit(DataResult.Success(userDao.getAllUser().toList()))
    }.catch { throwable ->
        emit(DataResult.Exception(throwable.message.toString()))
    }

    override suspend fun deleteAllUser() {
        userDao.deleteAllUser()
    }
}

 

위 코드에서 보는바와 같이 getAllUser()라는 함수로 Room에서 전체 저장된 값을 가져오는데

가져올 때 DataResult에 담긴 Flow로 값을 return 해주도록 하였습니다.

---

sealed interface UiState {
    data class Loading(val list: List<UserEntity> = emptyList()) : UiState
    data class EmptyListState(val list: List<UserEntity> = emptyList()) : UiState
    data class ShowListState(val list: List<UserEntity>) : UiState
    data class OnErrorState(val message: String) : UiState
}

sealed interface ErrorEvent {
    data class Error(val errorMessage: String) : ErrorEvent
}

@HiltViewModel
class MainViewModel @Inject constructor(
    private val mainRepository: MainRepository,
) : ViewModel() {
	...
}

 

다음으로는 ViewModel을 구성하는 방법입니다.

위와 같이 UIState라는 sealed interface를 각 UI상태에 맞게 정의를 해주었습니다.

(해당 부분도 각 상황에 맞게 구성해 주면 되겠습니다 개발자 재량!!)

 

ErrorEvent는 발생할 수 있는 여러 Error상황에 대해 정의해 놓은 sealed interface로

마찬가지로 각 상황에 맞게 구성 해주면 됩니다.

 

@HiltViewModel
class MainViewModel @Inject constructor(
    private val mainRepository: MainRepository,
) : ViewModel() {
    private val _uiState = MutableStateFlow<UiState>(UiState.Loading())
    val uiState: SharedFlow<UiState> = _uiState.asStateFlow()

    private val _errorEvent = MutableSharedFlow<ErrorEvent>()
    val errorEvent: SharedFlow<ErrorEvent> = _errorEvent.asSharedFlow()

    fun addUser(user: UserEntity) {
        viewModelScope.launch {
            mainRepository.insertUser(user)
        }
    }

    fun getAllUser() {
        viewModelScope.launch {
            mainRepository.getAllUser().collect { result ->
                when (result) {
                    is DataResult.Success -> {
                        if (result.data.isNotEmpty()) {
                            _uiState.value = UiState.ShowListState(result.data)
                        } else {
                            _uiState.value = UiState.EmptyListState()
                        }
                    }

                    is DataResult.Exception -> {
                        _uiState.value = UiState.OnErrorState(result.message)
                    }
                }
            }
        }
    }

    fun deleteAllUser() {
        viewModelScope.launch {
            mainRepository.deleteAllUser()
        }
    }

    /**
     * 에러 발생시에 해당 부분을 처리하는 함수로 여러가지 동작을 정희할수 있다.
     * **/
    fun onError(message: String) {
        viewModelScope.launch {
            _errorEvent.emit(ErrorEvent.Error(message))
        }
    }
}

 

ViewModeld에서는 UIState를 내보내는 StateFlow를 가지고

데이터를 호출하여 각 상황에 맞는 UIState를 넘겨줍니다.

---

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {
    ...
    private fun collectData() {
        viewModel.run {
            lifecycleScope.launch {
                repeatOnLifecycle(Lifecycle.State.STARTED) {
                    launch {
                        uiState.collect { state ->
                            when (state) {
                                is UiState.Loading -> {
                                    binding.loading.isVisible = true
                                }

                                is UiState.ShowListState -> {
                                    binding.run {
                                        loading.isVisible = false
                                        rvUser.isVisible = true
                                        tvNoItem.isVisible = false
                                    }
                                    userAdapter.submitList(state.list)
                                }

                                is UiState.EmptyListState -> {
                                    binding.run {
                                        loading.isVisible = false
                                        rvUser.isVisible = false
                                        tvNoItem.isVisible = true
                                    }
                                }

                                is UiState.OnErrorState -> {
                                    onError(state.message)
                                }
                            }
                        }
                    }

                    launch {
                        errorEvent.collect { event ->
                            when (event) {
                                is ErrorEvent.Error -> {
                                    Toast.makeText(
                                        this@MainActivity,
                                        event.errorMessage,
                                        Toast.LENGTH_SHORT,
                                    ).show()
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

각 Flow는 Activity에서 collect해줍니다.

UIState는 상황에 맞게 UI를 업데이트 하고, SharedFlow는 전달받은 Event에 따라 처리해주면 됩니다. 😎

 

여기서 알 수 있듯 StateFlow는 말그대로 상태를 저장하고 있는 Flow이고

SharedFlow는 주로 이벤트를 전달할때 사용하는 Flow로 보면 좋을 것 같습니다.

 

ShredFlow의 경우 replay , extraBufferCapacity , OnBufferOverflow의 옵션이 존재하며 각 설명은 아래 표로 확인 부탁드립니다.

이름	설명
replay	기본값이 0으로 새로운 구독자들에게 이전 이벤트를 몇개를 방출할지 지정하는 옵션 (0으로 되어있을 경우에는 가장 마지막에 저장된 이벤트가 방출됨 즉, StateFlow와 같은 동작이 된다.)
extraBufferCapacity	버퍼 저장 크기를 지정하는 옵션
OnBufferOverflow	버퍼 저장크기를 초과시 할 동작 BufferOverflow.SUSPEND  버퍼가 가득 찬 경우 버퍼에 여유공간이 생길때 까지 suspend 한다. BufferOverflow.DROP_LATEST 버퍼가 가득 찬 경우 가장 최근 데이터를 drop 하고 새로운 데이터를 버퍼에 넣는다. BufferOverflow.DROP_OLDEST  버퍼가 가득 찬 경우 가장 오래된 데이터를 drop하고 새로운 데이터를 버퍼에 넣는다.

 

이상으로 StateFlow와 SharedFlow를 활용하는 방법에 대해 알아보았습니다.

이 포스팅이 여러분에게 많은 도움이 되었으면 좋겠네요! 😃

 

오늘도 즐코하세요 :)