State Flow (Jetpack Compose)

Collect State Flow (Jetpack Compose)

The collectStateFlow extension function is designed to simplify handling the state updates emitted by a StateFlow<Resource<T>> in Jetpack Compose composables. It takes a Resource<T> type, which represents the different states a data fetching operation can be in:

• Resource.Default: Initial state before data fetching begins.

• Resource.Loading: Data is being fetched.

• Resource.Empty: Data fetching completed but no data was found.

• Resource.Failure: Data fetching failed with an optional error message.

• Resource.Success: Data fetching was successful, containing the fetched data.

Function Parameters:

• onLoading: A composable function to be invoked when the state is Resource.Loading. This allows you to display a loading indicator while data is being fetched.

• onEmpty (optional): A composable function to be invoked when the state is Resource.Empty. This is useful for handling cases where no data is available.

• onFailure: A composable function that takes an optional error message string as a parameter. It's invoked when the state is Resource.Failure. You can use this to display an error message to the user.

• onSuccess: A composable function that takes the fetched data (T) as a parameter. It's invoked when the state is Resource.Success. This is where you typically render the retrieved data in your composable.

How it Works:

1. The function calls collectAsState() on the StateFlow to convert it into a State<Resource<T>>. This allows you to access the current state value within the composable.

2. It retrieves the current state value using value.

3. It uses a when expression to handle different state types:

   • If the state is Resource.Default, nothing happens (this state is usually not of interest).

   • If the state is Resource.Loading, the onLoading composable is invoked to display a loading indicator.

   • If the state is Resource.Empty, the optional onEmpty composable is invoked (if provided) to handle the case where no data is found.

   • If the state is Resource.Failure, the onFailure composable is invoked with the error message (if available) to display an error message.

   • If the state is Resource.Success, the onSuccess composable is invoked with the fetched data to render it in your composable.

Usage:

viewModel.dataFlow.collectStateFlow(
    onLoading = {
        // Display a loading indicator while data is being fetched
        Text("Loading...")
    },
    onEmpty = {
        // Handle the case where no data is found (optional)
        Text("No data available")
    },
    onFailure = { errorMessage ->
        // Display an error message if data fetching fails
        Text("Error: $errorMessage")
    },
    onSuccess = { data ->
        // Render the fetched data
        Text("Fetched data: $data")
    }
)

• A loading indicator ("Loading...") is displayed when the state is Resource.Loading.

• An optional message ("No data available") is shown when the state is Resource.Empty.

• If data fetching fails and an error message is available, it's displayed ("Error: $errorMessage").

• When data is successfully fetched, it's rendered in the text ("Fetched data: $data").

This extension function helps you write cleaner and more concise composables by handling the different states of a StateFlow<Resource<T>> in a more structured way.