architecture - 榆树 0.17 : How to subscribe to sibling/nested component changes

Question

在此处查看已接受答案的建议的完整实现:https://github.com/afcastano/elm-nested-component-communication

============================================= ==================

我有一个父组件和两个子组件。 See working example

使用 Elm 架构，当左子节点中的任何计数器发生变化时，如何更新右子节点？

目前，我让父组件读取左子模型的嵌套属性并将其设置为右子模型，但在我看来，父组件不应该了解太多的内部结构 children 。

这些是模型和消息:

type alias MainModel =
  { counterPair : CounterPair
  , totals: Totals
  }

type alias CounterPair =
  {
    greenCounter : Counter
  , redCounter : Counter
  }

type alias Counter =
  {
    value : Int
  , totalClicks : Int  
  }

type alias Totals =
  {
    totalRed : Int
  , totalGreen : Int
  , combinedTotal : Int
  }

type MainMsg
  =  UpdateCounterPair CounterPairMsg
  |  UpdateTotals TotalsMsg


type alias RedVal = Int
type alias GreenVal = Int

type TotalsMsg
  = UpdateTotals RedVal GreenVal

如您所见，主模型包含两个子模型。对模型又包含两个计数器模型。

Total 模型对 Pair 组件的 CounterModels 的变化感兴趣。

要做到这一点，主更新函数应该是这样的:

updateMain: MainMsg -> MainModel -> MainModel
updateMain msg model =
  case msg of
    UpdateCounterPair counterPairMsg ->
    let 
      counterPairModel = updateCounterPair counterPairMsg model.counterPair
      totalsModel = updateTotals (UpdateTotals counterPair.redCounter.value counterPair.greenCounter.value) model.totals
    in
      {model | counterPair = counterPairModel, totals = totalsModel}

我不喜欢的地方在这一行:

updateTotals (UpdateTotals counterPair.redCounter.value counterPair.greenCounter.value) model.totals

1 - 主模块需要知道如何获取计数器的值，以便它可以将更新传递给 updateTotal 函数。

2 - Main 模块还需要了解 Totals 模块联合类型的内部结构，以便它可以使用 UpdateTotals 构造函数。

有没有其他方法可以让 Totals 组件在父级不知道模型结构细节的情况下订阅 Pair 组件？

非常感谢。

Answer 1

如果您有一个组件并且希望该组件产生副作用，换句话说，在其自身之外产生影响，您可以将一些信息(数据)与模型和 Cmd 一起返回:

更新:Msg -> Model -> (Model, Cmd Msg, SomeInfo)

parent 可以使用SomeInfo 来决定在其他地方做什么。

如果一个组件需要从外部更新，最好通过自定义更新函数公开它。在计数器的情况下，它看起来像这样:

更新值:整数 -> 模型 -> 模型

这样，您就可以在模块内自由使用任何您想要的表示形式。计数器的父级可以在遇到某些情况时更新计数器的模型。

value : Model -> Int 之类的函数也可用于从计数器的模型中提取信息。

所有这些确保您在向模块用户呈现用于检索和更新数据的接口(interface)时保持封装。