f# - Fable React 有状态组件上的 Elmish 调度

标签 f# fable-f# elmish

我需要使用带有 elmish 调度的 Fable-React 有状态组件。我不知道如何创建它。

我正在使用这个项目模板:https://github.com/fable-elmish/templates

这是模型:

module Home.Types

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

这是组件:
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")]
            ]

如何使用 ofType 函数创建它,然后我可以像这样使用它:
  let pageHtml =
    function
    | Home -> Home.View.root model.home (HomeMsg >> dispatch)
    | Documentation -> documentation (DocumentationMsg >>  

最佳答案

我在 props 中添加了 dispatch 函数:

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

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

创建 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)}

然后我这样称呼它:
RequestProcessDocumentation |> this.props.dispatch

关于f# - Fable React 有状态组件上的 Elmish 调度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49507597/

相关文章:

reactjs - 在 Fable/Elmish 中使用第三方 React 组件

webpack - 如何使用 Fable-Elmish 添加 img 标签

inheritance - 返回 F# 中的派生类

f# - 创建大型 F# 记录的值的最简单方法是什么?

reflection - F#:如何使用反射获取空可区分联合案例的实例类型?

f# - Fable-Elmish 中的渲染组件

f# - 列表中的 Unchecked.defaultof

logging - 如何在 F# Fable 中登录 Application Insights?

f# - mkProgram 是否比 mkSimple 公开更多的功能?

f# - 带有 EventTarget 的寓言中的语法混淆