使用 scalajs Diode 和带有为 Posts（序列）定义的处理程序的 ApplicationCircuit，我能否以某种方式将其映射到 ModelProxy[Post] 个体？

Question

编辑 2：

必须有比我在无拘无束中所做的更好的方法

        <.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)(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 改变时，没有改变的 post 不会再次呈现。像，

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

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

这样当模型改变时（生成一个新的 postList）React 将再次渲染列表，但会跳过渲染没有改变的项目。

相比之下，如果您只有 connect 个人 posts，则对列表本身的更改（如添加或删除 posts）不会触发渲染。

使用 scalajs Diode 和带有为 Posts（序列）定义的处理程序的 ApplicationCircuit，我能否以某种方式将其映射到 ModelProxy[Post] 个体？

Using scalajs Diode and an ApplicationCircuit with a handler defined for a Posts (sequence), can I somehow map it to a ModelProxy[Post] individual?

flux

reactjs

scala.js

编辑 2：

编辑