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

我有一个使用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" }
    }
  }
}

我将entities保存在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中的数据。

我对数据结构感到困惑，因为通常我使用数组，但是在real-world示例中，这对我来说是一种新的方式，其中数据进行了标准化。

最佳答案

要将减速器与视图连接，需要一个容器。然后，在您的视图中，您可以执行以下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;

关于javascript - 如何在React/Redux中打印标准化数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44794518/