Dependency

To use the Jetpack Compose extensions please add the bloc-compose artifact as a dependency in the Gradle build file:

implementation("com.1gravity:bloc-compose:0.11.0")

observeState

Observing a bloc's state in a Composable is very easy due to the observeState extensions functions:

@Composable
fun MyComposable(bloc: MyBloc)
    val state by bloc.observeState()

The state property above is of type State so state changes will trigger the Composable to recompose.

Here's a more comprehensive example:

@Composable
fun ToDo(bloc: Bloc<List<ToDo>, ToDoAction, Unit>) {
    val state: List<ToDo> by bloc.observeState()

    var text: String by rememberSaveable { mutableStateOf("") }

    Column {
        TextField(
            value = text,
            onValueChange = { text = it },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions(
                onDone = {
                    // when we hit the enter key, add a new todo item to our list
                    bloc.send(AddToDo(text))
                    text = ""
                },
            )
        )

        LazyColumn {
            // the list of todo items will update automatically when items are 
            // added, removed or modified
            items(state) { todo ->
                Row {
                    Checkbox(
                        // updates automatically when the item's completion status changes
                        checked = todo.completed,
                        onCheckedChange = { 
                            // this will modify the todo item's completion status
                            bloc.send(ToggleToDo(todo.uuid)) 
                        }
                    )
                    Text(text = todo.description)
                }
            }
        }
    }
}

tip

observeState is available for Bloc, BlowOwner, BlowObservable and BlocObservableOwner.

observeSideEffects

observeSideEffects is the equivalent of observeState but for side effects:

@Composable
internal fun MenuEntries(bloc: MenuBloc) {
    val sideEffect by bloc.observeSideEffects()

    sideEffect?.let { menuEntry ->
        val context = LocalContext.current
        val intent = Intent(context, menuItem2Activity[menuEntry])
        context.startActivity(intent)
    }

tip

observeSideEffects is available for Bloc, BlowOwner, BlowObservable and BlocObservableOwner.

Composable Preview

To create Composable Previews use the previewBlocContext() function that creates a BlocContext which is required to create a Bloc:

@Preview
@Composable
fun MenuEntriesPreview() {
    val bloc = MainMenuCompose.bloc(previewBlocContext())
    MenuEntries(bloc, Modifier.fillMaxWidth().fillMaxHeight())
}

tip

previewBlocContext() creates a Lifecycle tied to the lifecycle of the Composable so it's shorter lived than the "real" lifecycle but it's good enough for a preview.