Question

我使用normalizr标准化数据：

{
  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" }
    }
  }
}

我在reducer中保存entities，我想在我的页面上打印它们。我可以这样做：

const articles = data.entities.articles;
for (let key in articles) {
  console.log( articles[key].author + ', ' +  articles[key].title);
}

在React / Redux中可以正常打印这样的JSX模板中的规范化数据还是存在更好的方法？

UPD

我使用此示例https://github.com/reactjs/redux/tree/master/examples/real-world创建了一个应用程序，但我不了解JSX模板中是否打印了entities的数据。

我对数据结构感到困惑，因为通常我使用的是数组，但在real-world示例中我是一个新的方法，其中数据标准化为这样。

Answer 1

要将缩减器与视图连接，您需要一个容器。然后在您的视图中，您可以执行类似于以下jsfiddle的操作。

https://jsfiddle.net/madura/g50ocwh2/

      var data = {
    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(data.entities.articles);
  return ( < div > {
    Object.keys(data.entities.articles).map(function(key) {
      return <p key = {
        key
      } > {
        data.entities.articles[key].title
      } < /p>
    })
  } < /div>);
}

连接容器后，您将把数据作为属性提供给视图。因此，您可以在视图中访问以下数据。

this.props.data.entities.articles;

如何在React / Redux中打印规范化数据

1 个答案: