javascript - 映射到嵌套组件的 Elm 效果

Question

在此example (RandomGifPair) ，在父组件触发 RandomGif.update act model.left 之后，与 NewGif 对应的更新实际上是如何连接执行的？似乎 RandomGif.update NewGif maybeUrl 需要在某处手动触发。更明确一点，RandomGifPair 触发其 Left 更新操作并通过手动调用 RandomGif 的更新函数取回模型/效果对。返回的效果通过 Effects.map Left fx 执行，然后继续到 RandomGif 中的 getRandomGif 函数

getRandomGif : String -> Effects Action
getRandomGif topic =
  Http.get decodeUrl (randomUrl topic)
    |> Task.toMaybe
    |> Task.map NewGif
    |> Effects.task

据我所知，它将继续触发 NewGif Action ，由于 Effects.map，它现在也被标记为 Left。图片中我唯一缺少的部分是此操作如何保持在 RandomGif 的范围内以及与此更新的 NewGif 案例对应的操作实际上被触发:

update : Action -> Model -> (Model, Effects Action)
update action model =
  case action of
    RequestMore ->
      (model, getRandomGif model.topic)

    NewGif maybeUrl ->
      ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl)
      , Effects.none
      )

当 Main.elm 仅具有来自 RandomGifPair 的更新功能，因此没有 NewGif 的情况。

我确信答案在于端口、Effects.map、forwardTo 或我遗漏的任务的具体细节。

供引用，here is an attempt to solve the problem in javascript它在 NewGif 的上层更新函数中包含一个条目，并在其中手动调用 RandomGif.update。可能不是尝试理解榆树的最佳方式......

Answer 1

所有操作都会进入您的顶级更新功能。无法将操作范围限定为子更新函数 - 它们总是位于顶部。因此，大多数程序将手动将操作路由到较低的更新功能。这就是这里发生的事情。所有操作都必须进入 RandomGifPair.update，并且由该函数决定 a) 调用子函数和 b) 将结果存储在状态中的正确位置。这可能会非常麻烦。

Here's the specific point in RandomGifPair.update that does the routing .

第 42 行说“哦，这是一个 Left Action ？给我里面的 act。现在你有你想要的 NewGif或act中存储的RequestMore，和你知道它是绑定(bind)到左边的。第44行调用下更新函数，它知道如何来处理这个问题。第 46 行将较低更新函数的结果存储在模型中(通过使用新的左侧重新创建整个模型并重新使用旧的右侧)。

这一切都被 Effects 周围的样板所掩盖。如果您能先了解 Action 的流程，然后返回并将相同的逻辑应用于效果，我认为这会变得更加清晰。