使用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)))
          }
        )

这是一个奇怪的问题,但我有我的理由.当我Post从ModelProxy[Posts]哪里渲染时case class Posts(seq: Seq[Post]),我想代替ModelProxy[Post]每个渲染一个代理.这将允许我继续前进,将其包装在一起Pot,然后Post轻松处理各个更新,删除等.

我无法finagling对象变成这种形式,虽然,但我觉得有这么多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)(proxy ? 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.对于这种情况,它可能是最好的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将再次呈现列表,但会跳过渲染未更改的项目.

相反,如果您只是connect单独的帖子,那么对列表本身的更改(如添加或删除帖子)不会触发渲染.