Hi! I'm triying to build a TodoApp with the MVI pattern. :thread:

# compose

[carbaj0]

Hi! I'm triying to build a TodoApp with the MVI pattern. 🧵

[carbaj0]

For me each screen have is own Store, and each Store hold is own State

[carbaj0]

sealed class State
object Error : State()
object Loading : State()
data class Success(
    val tasks: Tasks,
    val input: String,
) : State()

[carbaj0]

Some people maybe have a unique store with the entire State application.

[carbaj0]

The store looks like this:

[carbaj0]

class Store() : ViewModel() {
    val state: MutableStateFlow<State> = MutableStateFlow(Loading)

    fun Action.reduce(currentState: State): State =
        when (this) {
            is LoadTasks -> //copy of success state
            is ChangeInput -> //copy of success - val input: String,
            is AddTask -> //copy of success -  val tasks: Tasks,

    fun action(action: Action) {
        state.value = action.reduce(state.value)
    }
}

[carbaj0]

and the Compose App is something like that:

[carbaj0]

setContent {
   val s by store.state.collectAsState()
   when (val state = s) {
       is Error -> Column {
          Text(text = "Error")
          Button(onClick = { store.action(LoadTasks) }) {
               Text(text = "Reload")
             }
           }
        is Loading -> Text(text = "Loading")
        is Success ->
            Column {
               Log.e("render", "Column")
               Row {
                  Log.e("render", "Row")
                  TextField(
                       value = state.input,
                       onValueChange = { store.action(ChangeInput(it)) }
                  )
                  Button(onClick = { store.action(AddTask(state.input)) }) {
                        Log.e("render", "Button")
                        Text(text = "Add")
                  }
                  Row {
                     Log.e("render", "Row2")
                     Row {
                        Log.e("render", "Row3")
                     }
                  }
             }
             LazyColumn {
                items(state.tasks.tasks) { task ->
                   Text(text = task.task)
                }
                         }
            }

[carbaj0]

each time that I enter a letter in the TexField, a recomposition of all Composable occurs, this makes sense.

[carbaj0]

How could I update the TextField and the Button only?

[carbaj0]

since I'm just making a copy of the state.input

[dewildte]

You could make input a MutableState<String>

[dewildte]

And have your store mutate it.

[dewildte]

But personally I don't believe MVI is a really good fit for Compose. MVI will cause performance and other odd behavior due to how Compose computes it's new UI.

[dewildte]

Compose is best at detecting mutations in the data you set and updating only what changed. But emitting a gigantic screen state each time makes it harder for Compose to do its thing.

[dewildte]

Compose was designed to work best with MutableState<T> classes, it would be wise IMHO to use those.

[dewildte]

MVI tries to force a system that is a good marriage between OOP and FP into a FP box.
In my experience this is not a wise idea.

[carbaj0]

With this little experiment i try to see the pro and cons of this pattern, if the most efficient solution is wrap my objets with MutableState<T>, i think that i prefer not to use MVI 😆

[carbaj0]

MutableState <T> is an implementation detail and I think that my store shouldn't matter if I use Compose or React

[carbaj0]

i really appreciate your opinion

[dewildte]

I have another solution that kind of acts as an adapter between the two worlds, Store and Compose, but honestly it's just going to add more work to maintain. But if you're interested I would be happy to code up an example for you.

[carbaj0]

If you have a free time I will be happy to see that solution 😀

[carbaj0]

it isn't because I finally used it, but more in order to learn and understand even further about the problem