passing/converting Elmish `dispatch` messages from a parent component to a child component

Question

In the wonderful FBlazorShop repo, Onur Gumus is riffing off of Steve Sanderson’s Pizza Workshop with F# flavor. On line 128 of blob/master/FBlazorShop.Web.BlazorClient/Home/Home.fs [GitHub], Onur is passing an Elmish Message for the parent, HomeView, inheriting ElmishComponent<Model, Message> , to a child, PizzaConfigView, inheriting ElmishComponent<Model, PizzaConfigMsg>. By convention, we can see Message being converted (?) to PizzaConfigMsg with this:

(PizzaConfigMsg >> dispatch)

where dispatch is of type Message -> unit. At the time of this writing, I have no idea how this ‘conversion’ is happening (in part because I refuse to compile this repo by going back to .NET core 3.x). I am not familiar with this usage of the >> operator. Is this operation actually a conversion or is something else going on?

Brian Berns · Accepted Answer · 2022-03-22T19:56:36.507

If you find >> confusing, but are comfortable with |>, then you can easily rewrite that line like this:

fun pizzaMsg -> pizzaMsg |> PizzaConfigMsg |> dispatch

Since the top-level message type is:

type Message =
    | SpecialsReceived of PizzaSpecial list
    | PizzaConfigMsg of PizzaConfigMsg
    | OrderMsg of OrderMsg
    | CheckoutRequested of Order

This tells us that the code is converting a value of type PizzaConfigMsg (which I've called pizzaMsg above) to a top-level Message via the Message.PizzaConfigMsg union case, then dispatching the result.

This style of coding (where function arguments become implicit, rather than explicit) is called "point-free programming". You can find more information about it here.

passing/converting Elmish `dispatch` messages from a parent component to a child component

1 Answers1