调度 @ngrx/router-store 操作时出现 Redux devtools 扩展错误

Posted 2023-02-19

【中文标题】调度 @ngrx/router-store 操作时出现 Redux devtools 扩展错误

【英文标题】：Redux devtools extension error when dispatching @ngrx/router-store action

【发布时间】：2017-09-16 05:14:02

【问题描述】：

我正在使用以下库：

角 4 @ngrx/router-store @ngrx/store-devtools

就在最近，当尝试调度 go 路由器操作并将 relativeTo 设置为当前活动路由时：

go(['test', id], , relativeTo: this._active))

我收到此错误：

ERROR TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (shim.js:736)
    at derez (<anonymous>:2:5166)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)

似乎是 devtools 处理负载中的ActivatedRoute 的问题（类似于this issue）。

如果我实现go 动作创建器的新版本（如此处建议：Redux Devtools Extension Troubleshooting）以将toJSON 函数添加到NavigationExtras，那么一切正常：

go(path: string|any[], query?: any, extras?: NavigationExtras): any 
    extras['toJSON'] = function(): any 
        return  ...this, relativeTo: this.relativeTo.snapshot.url ;
    ;

    const payload =  path, query, extras ;
    return  type: routerActions.GO, payload ;

还有其他人遇到过这个问题吗？有关如何解决此问题的任何建议？

更新： 看起来它也与延迟加载的路由有关。仅当当前路由是延迟加载模块的一部分时才会发生错误（即通过loadChildren）

【参考方案1】：

redux-devtools 试图解析一个函数，因为 json 通常可以工作，但它假设存储中的所有内容都是对象而不是函数，因此它打破了 redux 的基本思想是使用发射来管理事件的状态函数使用角度标准

【参考方案2】：

您很可能传递了一个无法序列化的 React 合成事件。请参阅类似问题和故障排除。请注意，该问题的解决方案在 React 16 中将不可用，因为我们依赖于 React 内部。所以，我建议从troubleshooting.中选择一种解决方案

但是，如果我们可以让 jsan 在这种情况下不抛出，但至少跳过那些数据，那就太好了。如果您可以在那里添加带有测试用例的 pr，将不胜感激。似乎 toISOString 的问题仅针对特定事件，因为我无法重现。

【讨论】：

我能够使用提供的链接解决。另外，github.com/ngrx/platform/pull/12 的讨论中也提到了同样的问题，因此希望框架能尽快解决它