Question

我最近刚开始使用Elm，我遇到了更新功能的问题。我的目标是将我的大Main.elm文件拆分为多个较小的文件，但为了做到这一点，我首先尝试将主要组件拆分为同一文件中的较小组件。为此，我非常依赖this very informative guide。

分割Model和init（我已经为DiceRoller做过）相当简单，对于View来说它是微不足道的。不幸的是，对于更新而言并非如此。

目前，它看起来像这样（在Main.elm文件的主分支中）

type Msg = Change String
    | Name String
    | Password String
    | PasswordAgain String
    | Roll
    | NewFace Int
    | SearchImages
    | NewSearchResult (Result Http.Error (List String))
    | ChangeTermInput String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        Change newContent ->
            ({ model | content = newContent }, Cmd.none)
        Name name ->
            ({ model | name = name }, Cmd.none)
        Password password ->
            ({ model | password = password }, Cmd.none)
        PasswordAgain password ->
            ({ model | passwordAgain = password }, Cmd.none)
        Roll ->
            (model, Random.generate NewFace (Random.int 1 100))
        NewFace newFace ->
            ({ model | diceRoller = { dieFace = newFace} }, Cmd.none)
        SearchImages ->
            (model, getSearchResult model.termInput)
        NewSearchResult (Ok newResult) ->
            ( { model | termResult = newResult }, Cmd.none )
        NewSearchResult (Err _) ->
            (model, Cmd.none)
        ChangeTermInput term ->
            ({ model | termInput = term}, Cmd.none)

我设法让它更精致，但这不能编译（也见this Main.elm in the refactoring branch）：

type DiceRollerMsg = Roll
    | NewFace Int

type Msg = Change String
    | Name String
    | Password String
    | PasswordAgain String
    | MsgForDiceRoller DiceRollerMsg
    | SearchImages
    | NewSearchResult (Result Http.Error (List String))
    | ChangeTermInput String

updateDiceRoller : DiceRollerMsg -> DiceRoller -> DiceRoller
updateDiceRoller msg model =
    case msg of
        Roll ->
            model
        NewFace newFace ->
            { model | dieFace = newFace}

updateDiceRollerCmd : Msg -> Cmd Msg
updateDiceRollerCmd msg =
    case msg of
        Roll ->
            Random.generate NewFace (Random.int 1 100)
        NewFace newFace ->
            Cmd.none

updateCmd : Msg -> Model -> Cmd Msg
updateCmd msg model =
    Cmd.batch
        [ updateDiceRollerCmd msg
        , getSearchResult model.termInput
        ]

updateModel : Msg -> Model -> Model
updateModel msg model =
    case msg of
        Change newContent ->
            { model | content = newContent }
        Name name ->
            { model | name = name }
        Password password ->
            { model | password = password }
        PasswordAgain password ->
            { model | passwordAgain = password }
        MsgForDiceRoller msg ->
            { model | diceRoller = updateDiceRoller msg model.diceRoller}
        SearchImages ->
            model
        NewSearchResult (Ok newResult) ->
            { model | termResult = newResult }
        NewSearchResult (Err _) ->
            model
        ChangeTermInput term ->
            { model | termInput = term}

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    (updateModel msg model, updateCmd msg model)

由于模式与DiceRollerMsg匹配，因此无法在updateDiceRoller中的行Role上进行类型不匹配编译，但它尝试匹配Msg。如果我只是将输入和返回类型更改为DiceRollerMsg，我得到：函数updateDiceRollerCmd期望参数为：DiceRollerMsg但它是：Msg

此外，我不认为updateCmd中的Cmd.batch是最好的解决方案。

我感谢任何有关制作更好的榆树应用程序的建议，也不在这些问题之外。

Answer 1

您的编译错误源于使用Msg作为输入，并在case语句使用updateDiceRollerCmd时返回DiceRollerMsg的值。您可以通过模式匹配来解决此问题，并映射到MsgForDiceRoller。

updateDiceRollerCmd : Msg -> Cmd Msg
updateDiceRollerCmd msg =
    case msg of
        MsgForDiceRoller Roll ->
            Random.generate NewFace (Random.int 1 100)
                |> Cmd.map MsgForDiceRoller

        _ ->
            Cmd.none

您的视图中还有一个编译错误，您需要将onClick Roll更改为onClick (MsgForDiceRoller Rool)

在基本的Elm应用程序中重构更新功能

1 个答案: