Website development
Programming
Functional Programming
Elm
Comments 5
0

Почему это вообще должно быть в рамках одного компонента?
Почему это не один рутовый компонент который отображает два дочерних?

0

Есть подозрение, что не уловил правильно суть статьи, но обычно (в Fable-Elmish по крайней мере) происходит построение дерева компонентов.  


module NestedComponentOne =
  module Types = 
   type Model = { Counter : int }
   type Msg = | Increment | Decremenet 
  module State = 
    let init () = { Counter = 0 }, Cmd.empty
    let update mode = function  //same as let update model msg = match msg with 
    | Icrement -> { model with Counter = model.Counter + 1 }
    | Decrement -> { model with Counter = model.Counter - 1 }
  module View =
   let view model dispatch = 
    div [ ] [
      h1 [] [ str "Counter" ]
      str <| sprintf "Counter value is %s" model.Counter
      button [ OnCick = fun _ -> despatch Increment ] [ str "Increment" ]
      button [ OnCick = fun _ -> despatch Decrement ] [ str "Decrement" ]
    ]
module NestedComponentTwo =
  ... Same
module RootComponent = 
  module Types =
    type Model = { SomeFields : SomeTypes, NestedComponentOneState: NestedComponentOne.Types.Model, NestedComponentTwoState : NestedComponentOne.Types.Model }
    type Msg = 
     | SomeMsgs of SomeTypes
     | NestedComponentOneMsg of NestedComponentOne.Types.Msg
     | NestedComponentTwoMsg of NestedComponentTwo.Types.Msg
  module State = 
     let init() = 
        {SomeFields = someFieldsInit() 
          NestedComponentOneState = NestedComponentOne.State.init()
          NestedComponentTwoState = NestedComponentTwo.State.init() }
    let update model = function //same as let update model msg = match msg with 
    | SomeMsg someMsg -> ...
    | NestedComponentOneMsg msg -> NestedComponentOneMsg.State.update model.NestedComponentOneState msg
    | NestedComponentTwoMsg msg -> NestedComponentTwoMsg.State.update model.NestedComponentTwoState msg
  module View =
    let root model dispatch =
      div [] [
         div [] [ str "ComponentOne"; NestedComponentOne.View.view model.NestedComponentOneState (NestedComponentOneMsg >> dispatch) ]
         div [] [ str "ComponentTwo"; NestedComponentTwo.View.view model.NestedComponentTwoState (NestedComponentTwoMsg >> dispatch) ]
      ]

как-то ну в разных файлах. в разных изолированных модулях. Это основная мысль

0

Да, такой подход имеет смысл, но реализовать его гораздо сложнее.
Разделение на файлы исключительно ради разделения на файлы ничего не приносит за исключением ненужного усложнения системы.


Если некоторую логику можно безболезненно выделить в отдельный модуль и при этом она совершенно полностью изолирована и, желательно, использована в нескольких местах — это определенно стоит сделать.


Но в целом хранение приложения в едином модуле не является плохой практикой в Elm. Во всяком случае, насколько мне известно. Достаточно придерживаться здравого смысла.


В посте же описан простой прием для улучшения разделения на уровни абстракции :)


P.S. рекомендую посмотреть доклад Эвана Чаплики — Life of a file (надеюсь, правильно название помню). Лично я со многим не согласен там, но, думаю, важно знать свои опции и идеи, стоящие за дизайном языка/фреймворка/etc

Only those users with full accounts are able to leave comments., please.