3

非常に標準的なネストされた JSON 応答があります。 プロジェクトには多くのダッシュボードがあります。ダッシュボードには多くのグラフがあります。

スキーマを定義して使用する正しい方法は何ですか?

以下は、Schemas.js のコード、API 応答、および Normalizr が API 応答を変換するコードです。

スキーマ.js:

import { Schema, arrayOf, normalize } from 'normalizr';

// Create a schema for each model.
const project = new Schema('projects');
const dashboard = new Schema('dashboard');
const chart = new Schema('chart');

// Projects have many dashboards.
project.define({
  dashboards: arrayOf(dashboard)
});

// Dashboards have many charts.
dashboard.define({
  charts: arrayOf(chart)
});

export const Schemas = { project, dashboard, chart };

私のAPI応答:

{
  projects: [{
    id: 1,
    name: "Project 1",
    dashboards: [{
      id: 1,
      name: "Dashboard 1",
      charts: [{
        id: 1,
        name: "Chart 1"
      },
      {
        id: 2,
        name: "Chart 2"
      }]
    },
    {
      id: 2,
      name: "Dashboard 2",
      charts: [{
        id: 3,
        name: "Chart 3"
      },
      {
        id: 4,
        name: "Chart 4"
      }]
    }]
  },
  {
    id: 2,
    name: "Project 2",
    dashboards: [{
      id: 3,
      name: "Dashboard",
      charts: []
    }]
  }]
}

アクションでこの JSON を受け取ると、normalize(response, Schemas.project);. これにより、応答全体が に移動するようentities.projects.undefinedです。

{
  entities: {
    projects: {
      undefined: {
        projects: [{
          id: 1,
          name: "Project 1",
          ...
        }, ...]
      }
    }
  },
  result: undefined
}

このためにスキーマを正しく定義して使用するにはどうすればよいですか?

参考文献:

https://github.com/gaearon/normalizr

https://github.com/reactjs/redux/blob/master/examples/real-world/actions/index.js

4

1 に答える 1

5

これにより、望ましい結果が得られるはずです。

normalize(response, {
    projects: arrayOf(Schemas.project)
});

応答には追加のキーがあり、arrayOf() は API が結果の配列を返すことを示しているため、projects キーが必要です。

于 2016-03-29T17:18:33.123 に答える