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, Mar 27 '18 at 11:55
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, Mar 27 '18 at 12:50

score 3 · Accepted Answer · answered Mar 27 '18 at 12:53

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 Answers1