Elmish dispatch on Fable React stateful component

Question

I need to use Fable-React stateful component with elmish dispatch. I can not figure out how to create it.

I am using this project template: https://github.com/fable-elmish/templates

here is model:

module Home.Types

    [<Pojo>]
    type Model = {
        isLoading:                  bool
    }

here is the component:

type Documentation(props) as this =
    inherit Component<Documentation.Types.Model,obj>(props)
    do
        ()

    override this.componentWillMount () =
        printfn "componentWillMount"
        **RequestProcessDocumentation |> dispatch <-- this is what I need**

    override this.render() =
        printfn "render"
        let (?) = Fable.Core.JsInterop.(?)

        div []
            [
                p [] [str(this.props.isLoading.ToString())]
                button [ OnClick (fun _ -> RequestProcessDocumentation |> dispatch ) ] [str("Click me")]
            ]

how can I create it using ofType function, so then I can use it like this:

  let pageHtml =
    function
    | Home -> Home.View.root model.home (HomeMsg >> dispatch)
    | Documentation -> documentation (DocumentationMsg >>

Why do you need to produce the message at that point? Why can't you just do the effect associated with it? — Fyodor Soikin
The message turns state into loading state(renders loading page) until ajax call is done. When done, another message is dispatched which turns state to not loading state (displays data) — Jan Bizub

Jan Bizub Jan Bizub · Accepted Answer · 2018-03-27T12:53:33

I added the dispatch function to props:

[<Pojo>]
type Model = {
    isLoading:                  bool
    processDocumentation:       ProcessDocumentationDto
    valuesForFilterDropdown:    DropdownFilterValues
    scopeOfFilter:              ScopeOfFilter
    expandedMenuItemsIds:       string list
}

[<Pojo>]
type DocumentationProps = {
    model:      Model
    dispatch:   Msg -> unit
}

create the view:

let root model dispatch =
  let inline documentation props = ofType<Documentation,_,_> props []

  let pageHtml =
    function
    | Home -> Home.View.root model.home (HomeMsg >> dispatch)
    | Documentation -> documentation { model.documentation with dispatch = (DocumentationMsg >> dispatch)}

and then I call it this way:

RequestProcessDocumentation |> this.props.dispatch

Elmish dispatch on Fable React stateful component

1 Answers