榆树架构单独的信号处理？

Question

我在网上的任何地方都找不到一个例子来回答这个问题：父组件如何响应来自子模块的不同操作？ 考虑一个带有提交按钮的简单聊天消息输入：

// 子组件：带有提交按钮的文本输入

type Action
    = InputChanged String
    | MessageSent String


view : Signal.Address Action -> Model -> Html
view addr model =
    div []
        [ input
            [ type' "text"
            , value model.content
            , on "input" targetValue (\val -> Signal.message addr (InputChanged val))
            ]
            []
        , button
            [ type' "submit"
            , onClick addr (MessageSent model.content)
            ]
            [ text "Send" ]
        ]

持有该输入框的父组件如何响应该输入框可能出现的两个动作？传统的“路过”是这样的：

// 父组件，持有帖子列表和子组件

-- update

type Action
    = MessageBoxAction MessageBox.Action


update : Action -> Model -> Model
update act model =
    case act of
        MessageBoxAction msg ->
            { model |
                currentMessage = MessageBox.update msg model.currentMessage
            }

-- view

view : Signal.Address Action -> Model -> Html
view addr model =
    div []
        [ MessageBox.view (Signal.forwardTo addr MessageBoxAction) model.currentMessage ]

我想要做的是捕获来自该子组件的消息，并在正常的“刚刚通过”之外对其进行响应。像这样的：

case act of
    MessageBoxSubmit msg ->
        let updatedMessage = MessageBox.update msg model.currentMessage
            newPost = Posts.update msg model.posts
        in  
            { model |
                posts = model.posts :: [ newPost ]
                , currentMessage = updatedMessage
            }

但我不知道该怎么做，特别是因为在将地址转发给孩子时，您没有机会提供多个地址...

MessageBox.view (Signal.forwardTo addr MessageBoxAction) model.currentMessage

Answer 1

有两条主要途径可以做到这一点。

1. 您可以更改 MessageBox update 的签名以返回您提供给 MessageBox init 的父操作。

   init : (String -> parentAction) -> Model
   init onSend = 
     { onSend = onSend
     , content = "" 
     }
   
   update : Action -> Model -> (Model, Maybe parentAction)
   
   update action model =
     case action of 
       MessageSent msg -> 
          let 
            model' = ...
          in 
            (model', Just (model.onSend msg))
   
       InputChanged str -> 
          let 
            model' = ...
          in 
            (model', Nothing)
   

在你的父模块中：

init = 
  { posts = [] 
  , currentMessage = MessageBox.init HandleSent
  }

update : Action -> Model -> Model
update act model =
    case act of
        MessageBoxAction msg ->
          let 
            (currentMessage', send) = MessageBox.update msg model.currentMessage
            model' = {model | currentMessage = currentMessage'} 
          in
            case send of 
              Nothing -> model'
              Just act -> update act model' -- you recursively call the update function with the new action that you received from the MessageBox.update
        HandleSent str -> { model | posts = str::model.posts }           

1. 您可以为 MessageBox 模块中的操作提供解码器。

在 MessageBox 模块中

sentMessage action = 
  case action of
    MessageSent msg -> Just msg
    _ -> Nothing

在父母中

update : Action -> Model -> Model
update act model =
    case act of
        MessageBoxAction msg ->
          let 
            currentMessage' = MessageBox.update msg model.currentMessage
            model' = {model | currentMessage = currentMessage'} 
          in 
            case MessageBox.sentMessage msg of
              Nothing -> model'
              Just str -> update (HandleSent str) model'

        HandleSent str -> { model | posts = str::model.posts }