我如何使用 Normalizr 来处理基本的嵌套 JSON?
How do I use Normalizr to handle basic nested JSON?
我有一个非常标准的嵌套 JSON 响应。 项目 有很多仪表板。 仪表板有许多图表。
定义和使用模式的正确方法是什么?
下面是我的 Schemas.js、我的 API 响应以及 Normalizr 将我的 API 响应转换成的代码。
Schemas.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
这应该会给你想要的结果:
normalize(response, {
projects: arrayOf(Schemas.project)
});
项目键是必需的,因为您的响应中有一个额外的键,arrayOf() 表示 API returns 结果数组。
我有一个非常标准的嵌套 JSON 响应。 项目 有很多仪表板。 仪表板有许多图表。
定义和使用模式的正确方法是什么?
下面是我的 Schemas.js、我的 API 响应以及 Normalizr 将我的 API 响应转换成的代码。
Schemas.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
这应该会给你想要的结果:
normalize(response, {
projects: arrayOf(Schemas.project)
});
项目键是必需的,因为您的响应中有一个额外的键,arrayOf() 表示 API returns 结果数组。