Elm 0.17:如何订阅同级/嵌套组件更改 [英] Elm 0.17: How to subscribe to sibling/nested component changes

问题描述

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

See the full implementation with the suggestions of the accepted answer here: https://github.com/afcastano/elm-nested-component-communication

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

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

我有一个带有两个孩子的父组件.查看工作示例

I have one parent component with two children. See working example

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

With the Elm Architecture, how can I update the right child when any of the counters in the left child change?

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

At the moment, I have the parent component reading the nested property of the left child model and setting it to the right child model, but it seems to me that the parent shouldn't know that much about the internal structure of the 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

如您所见，主模型包含两个子模型.反过来，配对模型也包含两个计数器模型.

As you can see, the Main model contains two sub models. The pair model in turn, also contains two counter models.

Total 模型对 Pair 组件的 CounterModels 的更改感兴趣.

The Total model is interested in changes on the CounterModels of the Pair component.

为此，主要更新函数将如下所示:

To do that, the Main update function would be like this:

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}

我不喜欢的东西在这一行:

The things that I don't like are in this line:

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

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

1 - The Main module needs to know how to get the value of the counters so that it can pass the update to the updateTotal function.

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

2 - The Main module also needs to know about the internals of the union type of the Totals module so that it can use UpdateTotals constructor.

Totals 组件是否可以通过其他方式订阅 Pair 组件而父组件不知道模型结构的详细信息?

Is there any other way in which Totals component can subscribe to Pair component without the parent knowing the details of the model structure?

非常感谢.

推荐答案

如果您有一个组件，并且您希望该组件有副作用，换句话说，要在其自身之外产生效果，您可以返回一些信息(数据)连同模型和命令:

If you have a component and you want that component to have a side-effect, in other words, to have an effect outside of itself, you can return some information (data) together with the model and the Cmd:

update : Msg ->模型 ->(模型，Cmd Msg，SomeInfo)

父级可以使用 SomeInfo 来决定在其他地方做什么.

The parent can use SomeInfo to decide what to do in other places.

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

If a component needs to be updated from outside, it is best to expose this through a custom update function. In the case of a counter this would look like this:

updateValue: Int ->模型 ->型号

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

This way, you are free to use whatever representation you want inside the module. The parent of the counter can then update the Model of the counter when it encounters some condition.

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

A function like value : Model -> Int can also be use to extract information from the Model of the Counter.

所有这些确保您在向模块用户呈现用于检索和更新数据的界面的同时保持封装.

All these ensure that you maintain encapsulation while presenting to the user of the module an interface for retrieval and updating of data.

这篇关于Elm 0.17:如何订阅同级/嵌套组件更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！