reactjs - 使用 scalajs Diode 和带有为 Posts (序列)定义的处理程序的 ApplicationCircuit，我可以以某种方式将其映射到 ModelProxy[Post] 个体吗？

Question

编辑2:

必须有一种比我在 haribranedness 中所做的更好的方法

        <.div(
          ApplicationCircuit.zoom(_.posts.postList).value.map {
            case p: Post ⇒
              ApplicationCircuit.connect(_.posts.postList.filterNot(x ⇒ x == p).head)(x ⇒ PostItemC(PostItemC.Props(x)))
          }
        )

这是一个奇怪的问题，但我有我的理由。当我从 ModelProxy[Posts] 渲染每个 Post 时，其中 case class Posts(seq: Seq[Post])，我想改为渲染一个 ModelProxy[Post]，每个代理一个。这将使我能够继续将其包装在 Pot 中，然后轻松处理单独的 Post 更新、删除等。

尽管如此，我在将对象欺骗成那种形式时遇到了麻烦，但我觉得有太多的 zoomFlatMap 和 zoomFlatMapRW 等，应该可以帮助我从中获得一些东西我在哪里到那里。也就是说，我迷路了。

编辑

我最近的尝试

    <.div(
      ApplicationCircuit.zoom(_.posts.postList).value.map {
        case p: Post ⇒
          ApplicationCircuit.connect(_.posts.postList.filterNot(x ⇒ x == p).head)(_.)
      }

即，ApplicationCircuit.connect(_.posts.postList)(代理⇒ModelProxy(????))

object ApplicationCircuit
  extends Circuit[ApplicationModel]
  with ReactConnector[ApplicationModel] {

  addProcessor(new DiodeLogger[ApplicationModel]())

  override protected def initialModel: ApplicationModel = ApplicationModel(
    Posts(Seq()),
    Masthead(NavigationItems(Seq()), "JustinTampa", "JustinTampa.com", active = false)
  )

  override protected def actionHandler = composeHandlers(
    new PostHandler(zoomRW(_.posts)((m,v) ⇒ m.copy(posts = v))),
    new MastheadHandler(zoomRW(_.masthead)((m,v) ⇒ m.copy(masthead = v)))
  )

Answer 1

在渲染代码中，您实际上应该只使用 ReactConnector 特征中的函数，例如 wrap 和 connect。对于这种情况，最好连接到Posts，然后渲染序列中的各个项目。

ApplicationCircuit.connect(_.posts.postList){ model =>
  <.div(model().map(post => PostItemC(PostItemC.Props(post))))
}

然后在您的 PostItemC 组件中，您应该实现 shouldComponentUpdate 方法，以便在 postList 时不会再次呈现未更改的帖子。变化。比如，

shouldComponentUpdate(scope => scope.currentProps.post ne scope.nextProps.post)

最后确保您的组件定义了 key 属性，以便 React 在更新后知道如何连接 post 组件。否则，您将收到有关组件数组中没有 key 的运行时警告。

这样当模型发生变化(生成新的 postList)时，React 将再次渲染列表，但会跳过渲染未更改的项目。

相反，如果您仅连接单个帖子，则对列表本身的更改(例如添加或删除帖子)不会触发渲染。