How to use the elmish hooks from a component? (0.6.0-preview6)

[marklam]

I've set up an app with a model passed to a component as IWritable, and the component uses ctx.useElmish.

The main view and the component render correctly, and the Msg from the button handler is passed to update by dispatch, but when the component re-renders, dispatch no longer calls update:

MainView render
TaskView render
Button click
Msg.update UpdateValue
MainView render
TaskView render
Button click
Button click
Button click

What am I doing wrong?

namespace TestApp

open Elmish
open Avalonia
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts
open Avalonia.Controls
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Layout
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Elmish.ElmishHook

type Model =
    {
        Value : int option
    } with
    static member Default = { Value = None }

type Msg =
    | UpdateValue

module TaskView =
    let update msg model =
        printfn $"Msg.update {msg}"
        match msg with
        | UpdateValue ->
            let v = (model.Value |> Option.defaultValue 0) + 1
            { model with Value = Some v }, Cmd.none

    let create key (_model : IWritable<Model>) =
        Component.create (key,
            fun ctx ->
                printfn "TaskView render"
                let model = ctx.usePassed(_model, renderOnChange = true)
                let _, dispatch = ctx.useElmish (model, update)
                let value = model |> State.readMap (fun m -> m.Value)

                StackPanel.create [
                    StackPanel.orientation Orientation.Horizontal
                    StackPanel.children [
                        match value.Current with
                        | None ->
                            ()
                        | Some v ->
                            TextBlock.create [
                                TextBlock.text (v.ToString())
                            ]
                        Button.create [
                            Button.content "Update"
                            Button.onClick (fun _ -> printfn "Button click"; UpdateValue |> dispatch)
                        ]
                    ]
                ]
        )

module MainView =
    let create () =
        Component (
            fun ctx ->
                printfn $"MainView render"

                let model = ctx.useState (Model.Default)

                Grid.create [
                    Grid.rowDefinitions "*"
                    Grid.children [
                        ContentControl.create [
                            Grid.row 0
                            ContentControl.content (
                                TaskView.create "taskview" model
                            )
                        ]
                    ]
                ]
        )

type MainWindow() =
    inherit HostWindow()

    do
        base.Title   <- "Test"
        base.Content <- MainView.create ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme(baseUri = null, Mode = FluentThemeMode.Dark))

    override this.OnFrameworkInitializationCompleted() =
        this.Name <- "Test"
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            mainWindow.MinWidth <- 850.0
            mainWindow.MinHeight <- 600.0

            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =

    [<EntryPoint>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

[JordanMarr]

Thanks for the repro.

[marklam]

No problem! It's also available as a branch in a github repo - https://github.com/marklam/FuncUIFileDialog/tree/elmish-hook-in-component
where I reduced it from using Cmd.OfAsync (the async bit worked, but then subsequent messages didn't)

[JordanMarr]

I've found something interesting.
For some reason, conditionally creating the TextBlock causes the issue.

It works if the TextBlock is always created, but only the value changes:

module TaskView =
    let update msg model =
        printfn $"Msg.update {msg}"
        match msg with
        | UpdateValue ->
            let v = (model.Value |> Option.defaultValue 0) + 1
            { model with Value = Some v }, Cmd.none

    let create key (_model : IWritable<Model>) =
        Component.create (key,
            fun ctx ->
                printfn "TaskView render"
                let model = ctx.usePassed(_model, renderOnChange = true)
                let model, dispatch = ctx.useElmish (model, update)

                StackPanel.create [
                    StackPanel.orientation Orientation.Horizontal
                    StackPanel.children [
                         
                        TextBlock.create [
                            TextBlock.text (model.Value |> Option.map string |> Option.defaultValue "")
                        ]

                        Button.create [
                            Button.content "Update"
                            Button.onClick (fun _ -> printfn "Button click"; UpdateValue |> dispatch)
                        ]
                    ]
                ]
        )

I wonder if this is related to the reworked useElmish in preview6, or if the issue would be the same on the previous preview5.
Could you try it on preview5 and see if the issue is still there?

[marklam]

Yes, it works OK in preview 5 (https://github.com/marklam/FuncUIFileDialog/tree/elmish-hook-in-component-preview-5)

[JordanMarr]

Thanks, good to know that it is indeed a bug.

[JordanMarr]

I think have fixed the bug already... I'll do a few more tests and then get a new release out for you.

[marklam]

Awesome!

[JordanMarr]

#257 is merged, so v0.6.0-preview6.1 should be on NuGet soon.

[marklam]

preview 6.1 did fix that problem!

And I'm sorry to keep doing this, but having two components on the same Writable doesn't work the way I expected (at least given the code the way I've written it). This has two buttons, one increments a numeric counter and the other adds dots to a string. But switching between the buttons resets the other model member (presumably it re-initialises the model).

namespace TestApp

open Elmish
open Avalonia
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts
open Avalonia.Controls
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Layout
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Elmish.ElmishHook

type Model =
    {
        Value1 : int option
        Value2 : string option
    } with
    static member Default = { Value1 = None; Value2 = None }

type Msg =
    | UpdateValue1
    | UpdateValue2

module Views =
    let update msg model =
        printfn $"Msg.update {msg}"
        match msg with
        | UpdateValue1 ->
            let v = (model.Value1 |> Option.defaultValue 0) + 1
            { model with Value1 = Some v }, Cmd.none
        | UpdateValue2 ->
            let v = (model.Value2 |> Option.defaultValue "") + "."
            { model with Value2 = Some v }, Cmd.none

    let view1 key (_model : IWritable<Model>) =
        Component.create (key,
            fun ctx ->
                printfn "view1 render"
                let model = ctx.usePassed(_model, renderOnChange = true)
                let _, dispatch = ctx.useElmish (model, update)
                let value = model |> State.readMap (fun m -> m.Value1)

                StackPanel.create [
                    StackPanel.orientation Orientation.Horizontal
                    StackPanel.children [
                        match value.Current with
                        | None ->
                            ()
                        | Some v ->
                            TextBlock.create [
                                TextBlock.text (v.ToString())
                            ]
                        Button.create [
                            Button.content "Update"
                            Button.onClick (fun _ -> printfn "View1 Button click"; UpdateValue1 |> dispatch)
                        ]
                    ]
                ]
        )

    let view2 key (_model : IWritable<Model>) =
        Component.create (key,
            fun ctx ->
                printfn "view2 render"
                let model = ctx.usePassed(_model, renderOnChange = true)
                let _, dispatch = ctx.useElmish (model, update)
                let value = model |> State.readMap (fun m -> m.Value2)

                StackPanel.create [
                    StackPanel.orientation Orientation.Horizontal
                    StackPanel.children [
                        match value.Current with
                        | None ->
                            ()
                        | Some v ->
                            TextBlock.create [
                                TextBlock.text v
                            ]
                        Button.create [
                            Button.content "Update"
                            Button.onClick (fun _ -> printfn "View2 Button click"; UpdateValue2 |> dispatch)
                        ]
                    ]
                ]
        )

module MainView =
    let create () =
        Component (
            fun ctx ->
                printfn $"MainView render"

                let model = ctx.useState (Model.Default)

                Grid.create [
                    Grid.rowDefinitions "*,*"
                    Grid.children [
                        ContentControl.create [
                            Grid.row 0
                            ContentControl.content (
                                Views.view1 "view1" model
                            )
                        ]
                        ContentControl.create [
                            Grid.row 1
                            ContentControl.content (
                                Views.view2 "view2" model
                            )
                        ]
                    ]
                ]
        )

type MainWindow() =
    inherit HostWindow()

    do
        base.Title   <- "Test"
        base.Content <- MainView.create ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme(baseUri = null, Mode = FluentThemeMode.Dark))

    override this.OnFrameworkInitializationCompleted() =
        this.Name <- "Test"
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            mainWindow.MinWidth <- 850.0
            mainWindow.MinHeight <- 600.0

            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =

    [<EntryPoint>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

[JordanMarr]

I have reached the conclusion that sharing IWritable state between separate useElmish loops is too complex and will not work.
For that reason, I think the IWritable overloads need to be removed from the useElmish hook.

Alternatives:

1. Use a global Elmish loop as it is designed to be an app level state store
2. Or pass an IWritable for shared state, and useElmish only for local state, but don't mix them together

[marklam]

If I put the useElmish taking with init() rather than IWritable at the top level, and pass the dispatch function into the components, I have no way to get an IReadable<Model> for the components. If I instead pass the Model returned from useElmish, the component views don't update (presumably because I don't have any ctx.use... hook in the component.

It does however work if I just make the views take a Model and the dispatch function, returning a control rather than a Component - would that be the correct approach?

[JordanMarr]

After thinking about it some more, I think the useElmish overloads can stay the way they are. I think it is functioning as intended (even though it doesn't work exactly the same way it did in the previous versions).

I have reworked your example.

MainView

• The main loop now has its own useElmish loop that is initialized with an IWritable model (since we need to share it).
• The main loop encapsulates the update logic for incrementing the main model.
• incrementValue1 and incrementValue2 dispatch functions are passed to the child views, along with the parts of the main model that need to be shared (mapped as IReadable).

View1

• View1 has its own useElmish loop that can manipulate the passed in data and display it.
• Since each useElmish loop has its own model, you need to manually dispatch changes from the IReadable. As of now, useEffect is the best way to manually synchronize the loop.

View2

• View2 doesn't have its own useElmish loop; it just plugs in the data as-is.

namespace TestApp

open Elmish
open Avalonia
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts
open Avalonia.Controls
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Layout
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Elmish.ElmishHook

module View1 =

    type Model = 
        {
            Display: int
        }

    let init (display: int) = 
        { Display = display }, Cmd.none

    type Msg = 
        | UpdateDisplay of int

    let update msg model = 
        match msg with
        | UpdateDisplay display ->
            { model with Display = display }, Cmd.none

    let create (key, value1: IReadable<int>, incrementValue1) =
        Component.create (key, fun ctx ->
            
            let model, dispatch = ctx.useElmish(init, update, value1.Current) //, Program.withSubscription (subscriptions passedModel "view1"))
                
            ctx.useEffect (
                fun () -> 
                    dispatch (UpdateDisplay value1.Current)
                , [ EffectTrigger.AfterChange value1 ]
            )

            StackPanel.create [
                StackPanel.orientation Orientation.Horizontal
                StackPanel.children [
                    TextBlock.create [
                        TextBlock.text $"{model.Display}"
                    ]
                    Button.create [
                        Button.content "Update"
                        Button.onClick (fun _ -> printfn "View1 Button click"; incrementValue1())
                    ]
                ]
            ]
        )

module View2 =
    
    let create (key, value2: IReadable<string>, incrementValue2) =
        Component.create (key, fun ctx ->

            let passedValue2 = ctx.usePassedRead value2

            StackPanel.create [
                StackPanel.orientation Orientation.Horizontal
                StackPanel.children [
                    TextBlock.create [
                        TextBlock.text passedValue2.Current
                    ]
                    Button.create [
                        Button.content "Update"
                        Button.onClick (fun _ -> printfn "View2 Button click"; incrementValue2())
                    ]
                ]
            ]
        )

module MainView =
    
    type Model =
        {
            Value1 : int
            Value2 : string
        }

    type Msg =
        | IncrementValue1
        | IncrementValue2

    let init() = 
        { Value1 = 1; Value2 = "." }, Cmd.none

    let update msg (model: Model) =
        printfn $"Msg.update {msg}"
        match msg with
        | IncrementValue1 ->
            { model with Value1 = model.Value1 + 1 }, Cmd.none
        | IncrementValue2 ->
            { model with Value2 = model.Value2 + "." }, Cmd.none

    let create () =
        Component (fun ctx ->
            printfn $"MainView render"

            let writableModel = ctx.useState(init() |> fst)
            let _, dispatch = ctx.useElmish(writableModel, update)

            Grid.create [
                Grid.rowDefinitions "*,*"
                Grid.children [
                    ContentControl.create [
                        Grid.row 0
                        ContentControl.content (
                            View1.create (
                                "view1", 
                                writableModel |> State.readMap (fun m -> m.Value1), 
                                fun () -> dispatch IncrementValue1
                            )
                        )
                    ]
                    ContentControl.create [
                        Grid.row 1
                        ContentControl.content (
                            View2.create (
                                "view2", 
                                writableModel |> State.readMap (fun m -> m.Value2), 
                                fun () -> dispatch IncrementValue2
                            )
                        )
                    ]
                ]
            ]
        )

type MainWindow() =
    inherit HostWindow()

    do
        base.Title   <- "Test"
        base.Content <- MainView.create ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme(baseUri = null, Mode = FluentThemeMode.Dark))

    override this.OnFrameworkInitializationCompleted() =
        this.Name <- "Test"
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            mainWindow.MinWidth <- 850.0
            mainWindow.MinHeight <- 600.0

            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =

    [<EntryPoint>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

[marklam]

That's very helpful, thanks.

[JordanMarr]

Another variation - if you wanted the child views to have unfettered access to all the update actions:

Instead of wrapping the main dispatch function, you could also pass the main dispatch function to the child views (you would need to rename the main Msg to MainMsg and move it to the top so it is accessible to all the child views).
(It just depends on how much access you want to give the child views to update the master model.)