用“Normalizr”可视化 API 响应的更好方法

Posted 2023-02-22

【中文标题】用“Normalizr”可视化 API 响应的更好方法

【英文标题】：A better way to visualize API response normalized with "Normalizr"

【发布时间】：2021-05-13 22:54:47

【问题描述】：

我有这个标准化的 API 响应：

  "result": "123",
  "entities": 
    "articles": 
      "123": 
        "id": "123",
        "author": "1",
        "title": "My awesome blog post",
        "comments": [
          "324"
        ]
      
    ,
    "users": 
      "1": 
        "id": "1",
        "name": "Paul"
      ,
      "2": 
        "id": "2",
        "name": "Nicole"
      
    ,
    "comments": 
      "324": 
        "id": "324",
        "commenter": "2"
      
    
  

除了console.log() 与JSON.stringify() 一起使用之外，还有什么更好的方法来可视化/记录/调试（已经规范化或正在规范化）响应？

【问题讨论】：

我不确定你在问什么 - 但如果这是在浏览器中 - 最好将 json 对象记录到控制台 - 而不是它的字符串化版本 - 然后你可以在控制台中导航它.您还可以使用断点 - 并查看调试器中的结构 - 甚至在代码运行时对其进行更改。或使用控制台中的数据 - 使用其他功能。

我想我找到了答案，对于那些将 Normalizr 与 Redux 一起使用的人，使用 redux-devtools 你一旦你将它传递给减速器状态，就可以看到一个完整的标准化树。除此之外，console.log() 似乎是最好的方法。

【参考方案1】：

实际上有许多 NPM 模块，如 pretty-print-json 或 json-beautify 可以为您以及其他库执行此操作，尽管我最喜欢的漂亮打印方法仍然是 console.log() 与 JSON.stringify() 配对，因为您可以轻松地在控制台中使用剩余的参数进行美化。

JSON.stringify() 为您提供一个 replacer 和一个 space 参数：

replacer 允许您在字符串化对象中保留您想要的属性，因此他可以找到该属性并将其保留在字符串中； 空格定义了表格，用于在输出 JSON 字符串中插入空格，仅出于可读性目的。