使用 ngrx 效果器或组件提交数据

Submitting data using ngrx effects or a component

我们在这里和我的一个朋友讨论了一项任务,其中 "what should happen if one clicks the submit button of a form" ? 要求是首先使用 ngrx 存储中的数据验证该表单,然后将该数据提交到服务器。

...所以有两种方法可以做到这一点:

据我所知-在这种情况下使用效果是很常见的事情。你怎么看?

我认为这个问题没有正确答案,这完全取决于您作为开发人员的工作,选择正确的解决方案。

就我个人而言,如果它是一个简单的表格,我会这样做:

  • 验证表单是否填写正确(客户端验证)
  • 使用(可序列化的)表单对象发送保存操作,这不是 Angular 的形式,而只是一个 JavaScript 对象
  • 在效果中侦听此操作并调用服务
  • 如果出现问题:显示消息(通知、烤面包机、小吃店……)
  • 如果一切正常:关闭表格

这个问题可能没有正确答案。 我个人不喜欢将验证推入商店。我更喜欢使用 angular 中的内置验证工具来验证我的表单。 对于我当前的项目,我们使用反应式表单来验证输入,然后使这些表单与商店保持同步。 (此外,我们正在同步有效、已触及、未决、错误等属性)

一个优点是您基本上可以从任何地方提交表单,或者将它们拆分成更小的部分并在将它们发送到服务器之前合并它们。 而且您能够编写可重复使用的 angular 组件,这些组件与底层商店架构无关并且可以轻松重构。要将表单绑定到商店,您可以使用服务或摘要 class.

简短示例:

  • 响应式表单验证输入
  • 表单数据与商店同步(包括是否有效、待定、错误)
  • UI 元素(提交 button/form disabled/spinner)链接到 valid/pending 属性
  • a "SUBMIT_ACTION" 被调度并将状态更改为 pending=true
  • effect 正在等待响应并调度 "SUBMIT_ACTION_ERROR" 或 "SUBMIT_ACTION_SUCCESS"
  • 显示错误或显示成功通知