【问题标题】:Redux - Angular2/ngrx handling state in child componentsRedux - Angular2/ngrx 处理子组件中的状态
【发布时间】:2017-02-06 08:38:34
【问题描述】:

redux 中有一条规则,即 state 只能在 reducer 中修改。有谁知道将状态处理为子组件的最佳实践?我的意思是如何对组件中不是“容器”的某些事件做出反应,子组件应该能够修改其内部 @intput 模型,或者它应该只触发一些事件,然后“容器”应该转换为动作调度并且模型更改应该返回通过@input 回到这个组件?或者子组件可以修改其模型?假设我们有 datepicker 组件。在处理函数中选择日期时,我们应该更新 this.date 还是只触发 dateChange 事件并等待模型被容器更改?谢谢

【问题讨论】:

    标签: angular redux ngrx


    【解决方案1】:

    Angular 生态系统中有状态和无状态组件的良好概念。因此,这取决于您要应对的挑战:

    • 您的组件是否可以从您的路线接收初始数据
    • 组件是否具有当前状态的实时知识
    • 此信息在其他组件状态更改之间是否有效
    • 此组件有多少外部依赖项/通信
    • 具有有状态/无状态子组件等
    • 包含 Redux 操作(例如,ngrx/store 或 ng2redux)

    请阅读本文以获取有关此组件类型之间差异的更多信息。

    之后你需要自己画出什么样的方法最适合你自己的架构。

    https://toddmotto.com/stateful-stateless-components

    【讨论】:

      【解决方案2】:

      所以我的示例如下所示:

      <plumb [nodes]='nodes$|async' [connections]='connections$|async'  (connect)='onConnect($event)' (disconnect)='onDisconnect($event)')/>
      

      基本上它的图形控制来绘制图表..我将这个 cmoponent 作为块/ndoes 的参数列表和连接列表,当用户在图中连接项目或 disconet 时我触发了两个事件..所以问题是是否修改“连接”列表应该在组件内部,或者当用户绘制连接组件应该触发事件并使用绘图箭头等待,直到 ngrx 存储将处理它并返回新的连接列表:) 我不希望这个组件被存储因为我希望这是可重用的..根据您发送的文章,拥有组件状态看起来更好,因此它不应该修改连接列表本身。谢谢

      【讨论】:

      • 我认为在您的情况下,您需要有状态组件来封装组件特定行为和相关数据,以便在未来更好地进行单元测试,并在外部提供更好的回归保护和触发事件来管理组件通信。这对你来说有意义吗?
      • 是的,我也是这么想的..我不想改变传递给组件的“连接”集合,因为它的redux no no..所以我正在考虑在这个组件中制作一个副本并操作在此列表上并通知外界源连接列表需要更改..但是到目前为止还没有在任何代码中看到这种模式:)
      猜你喜欢
      • 1970-01-01
      • 2017-03-02
      • 2020-12-03
      • 1970-01-01
      • 1970-01-01
      • 2017-10-09
      • 1970-01-01
      • 2017-08-30
      • 1970-01-01
      相关资源
      最近更新 更多