How to create a useful state store?

[sixilli]

I'm a bit curious as to why this doesn't work how I might think it would. In Vue it's pretty trivial to create a state store with their use of signals. You can copy the signal around the app because the signal has a reference pointing to a value. Then when the value is updated the changes are propagated throughout the app. Sadly I've come to find that implementing a state store in Avalonia/FuncUI has been very challenging. It seems very difficult to get components to become reactive to state changes across the app. It seems like the only way to force updates is by making up a key that will change.

type ItemStore =
    { Items : IWritable<Item array>
      Selected : IWritable<Request option> }
      
       member this.updateRequest(newRequest : Request) =
         this.Items.Set { newRequest with updatedAt = DateTime.Now }
      
[<RequireQualifiedAccess>]
module StateStore =
    let itemStore = ItemStore.init ()
    
    //...
       
    let view =
        Component (fun ctx ->
            let selected = ctx.usePassedRead StateStore.itemStore.Selected
            let items = ctx.usePassedRead StateStore.itemStore.Items

            Grid.create
                [ Grid.columnDefinitions "*, 4, 4*"
                  Grid.children
                      [
                        ContentControl.create [
                            Grid.column 0
                            ContentControl.content (Sidebar.view items)
                        ]
                        GridSplitter.create [ GridSplitter.background "White"; GridSplitter.column 1; Grid.column 1 ]
                        ContentControl.create [
                            Grid.column 2
                            ContentControl.content (RequestEditor.view selected)
                        ]
                      ]])

I do wonder that maybe this pattern is okay, but only works if the option type is forcing me to break the chain? I did the below because it was annoying to check the option at every step in the application.

// RequestEditor module
    let view (selected : IReadable<Request option>) =
        let viewId =
            match selected.Current with
            | Some id -> id.ToString ()
            | None -> "none"

        Component.create (
            $"editor-main-{viewId}",
            fun ctx ->
                let selected = ctx.usePassedRead selected

                DockPanel.create
                    [ DockPanel.children
                          [ match selected.Current with
                            | Some request -> requestEditor (ctx.useState request)
                            | None -> emptyDisplay () ] ]
        )

EDIT: Turns out I was kinda right on how unraveling the option and creating a new state breaks the reactivity that I was expecting. I could create a function to deal with the boilerplate, but maybe there's a simpler approach? I've also struggled with lists and arrays. I want to unwrap them, but it seems like I have to do some hacky things with keys to make the state properly update.

Edit 2: I think my biggest question now is how to maintain reactivity for non trivial solutions. A few I ran into that felt difficult were unwrapping options, list items, and discriminate unions where I want to render something based on the type found. Like in my code I have Item which is either a request or a folder. When I render the request/folder, I still want to update it, but it's coming from an Item list and I'm not sure how to do this properly. I've found a few ways to accomplish it, but none feel correct and have weird side effects.

[JaggerJo]

Good questions overall. I recommend looking at the "Todo App" Sample project. It deals with a lot of the problems you describe above.

If you still have questions after that let me know.

[sixilli]

@JaggerJo I've heavily referenced that project and learned a ton. But there has been a few areas I've found particularly difficult.

• option type: The hardest part here is I have a high level component that renders something based on an option type. The issue here is that I have to unpack the type, and then pass in a new IReadable<Item> to the children which breaks the reactivity of when the state store is updated. So instead to handle this I simply check the option type in every component to preserve the reactivity. I've found relying on rerenders to be painful, because it seems like the children don't get rerendered.

    let view (selected : IReadable<Request option>) =
        Component.create (
            $"editor-main",
            fun ctx ->
                let selected = ctx.usePassedRead selected
                
                DockPanel.create
                    [ DockPanel.children
                          [
                            // every chold component has this same check which is not ideal
                            match selected.Current with
                            // I would really like if I could pass in IReadable<Request> here and keep reactivity when the store updates
                            | Some r -> requestEditor () 
                            | None -> TextBlock.create [ TextBlock.text "hi" ]
                    ] ]
        )

• discriminate union array: In my project I have a type Item = | Request of Request | Folder of Folder and in my state store I have IWritable<Item array> I haven't found a great way to keep reactivity using this setup. I saw the use of State.sequenceBy in the todo app which could have been good, but this will lead to a ton of code grouping that I don't want. Similarly, as the above every component will need to include code for both item types which I would prefer not to do. I would really like to keep this code as is and get reactivity here.

    let createSidebarItems (items : IReadable<Item array>) =
        Component.create (
            "sidebar-builder",
            fun ctx ->
                let items = ctx.usePassedRead items

                ScrollViewer.create
                    [ ScrollViewer.content (
                          StackPanel.create [
                              StackPanel.background "Gray"
                              StackPanel.children (
                                  items.Current
                                  |> Array.toList
                                  |> List.map (fun item ->
                                      // reactivity breaks here because I need to render different things based on the item type.
                                      // consolidating the request and folder code doesn't feel great since both are complex. 
                                      match item with
                                      | Folder f -> createFolderItem f :> IView
                                      | Request r -> createRequestItem r :> IView)
                              )
                          ]
                    )]
        )

[JaggerJo]

I get all the issues you describe above. For some of them I found good solutions, but not for all. It's quite hard to make all the transformations without breaking the reactive chain.

I'm wondering if it would have been better to base the state implementation on IObservable + IObserver, but what's missing is a way to obtain the current value.

Option type

Yeah, thats true. You can solve that by combining State.filter and State.map. Maybe there should be a State.choose.

Discriminated Unions

Yeah, it's tricky.

• You need to look at the state value in order to decide which view to render
• You need to build a reactive chain that points to an optional value (issue from above)

Code below is untested.

let renderConditional (viewFunc: IReadable<T> -> View) (state: IReadable<T option>)
    Component.create ("renderConditional", fun ctx ->
        let state = ctx.usePassedRead state
        
        match state.Current with
        | Some s -> viewFunc s
        | None -> Border.create []
    )

let item: IReadable<Item> = ctx.usePassedRead(item, renderOnChange = true)

match item.Current with
| Folder f ->
    item
    |> State.map (function Folder f -> Some f | _ -> None)
    |> renderConditional (fun s ->
        folderView a
    )

| Request r ->
    ...

[sixilli]

Sweet thank you for the info. I figured there had to be a way to work with these kind of data types. It seems like it's a sore spot missing in the current documentation. I also had no idea ctx.usePassedRead had extra parameters. I tried doing some funky things with keys, but this seems like a much better approach.

[JaggerJo]

actually'renderOnChange = true' is the default.

[sixilli]

I played around with it a bit today and didn't have a ton of luck with the discriminate union stuff. Maybe it's a personal skill issue but I'll keep trying.