javascript - 如何在 React/Redux 中打印标准化数据

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中，我想将它们打印在我的页面上。我可以这样做:

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 的数据。

我对数据结构感到困惑，因为通常我使用数组，但在现实世界示例中，对我来说这是一种新的方式，数据像这样标准化。

Answer 1

要将您的 reducer 与您的 View 连接起来，您需要一个容器。然后在您看来，您可以执行以下 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>);
}

连接容器后，您将把数据作为 View 的属性获取。因此您可以在 View 中访问您的数据，如下所示。

this.props.data.entities.articles;