Question: How to handle UI bindings the flux way? about fluxus HOT 4 CLOSED

Great question! Yes, the pure flux way of doing things says that state should only ever be changed with mutations.

I briefly investigated to see if there is a different way to work with a Toggle to make it commit a mutation instead of binding directly to myBoolBinding, but couldn't find anything. Ideally it would have an action { } param just like a button, or some kind of callback, or an event... There might still be some way to do it, I need to investigate further.

We could also just live with this as some kind of new hybrid flux/bindings swiftui pattern, maybe... But that would remove some of the advantages of the flux pattern, like being able to describe the state purely as a list of mutations (for time travel, undo/redo, dev tools, etc).

Things like this could make us evolve away from the pure flux pattern into something new... I am ready and willing to change the way Fluxus works to whatever works best with SwiftUI.

BTW there is a pattern called Command Query Responsibility Segregation that is basically like flux. Fluxus might evolve into a new pattern, similar to CQRS, but with the idea of bindings thrown in. We'll see as things evolve.

Let me know if you figure out a way to make a Toggle commit a mutation, or have any other thoughts about good ways to evolve this pattern to fit well with SwiftUI.

from fluxus.

I think I've figured out a clean way of doing this actually: binding to a computed property, like this:

var myBoolBinding = Binding<Bool> (
  getValue: {
    globalStore.state.counter.myBoolBinding
  },
  setValue: { value in
    globalStore.commit(CounterMutation.SetMyBool(value))
})

and using like this:

Toggle(isOn: myBoolBinding) {
  Text("My boolean is: \(myBoolBinding.value ? "true" : "false")")
}

Turns out this is almost exactly how Vuex does form handling, see the "Two-way Computed Property" section: https://vuex.vuejs.org/guide/forms.html#two-way-computed-property

One caveat here is I can't access self.store inside getValue/setValue, so I had to create a global for the store...

from fluxus.

So I went ahead and updated the README and example app to show this technique. Thanks for the feedback!

from fluxus.

Hi and sorry for the late response.

Your solution looks definitely like the right way to go! Thanks a lot for looking into it!

from fluxus.