我该如何处理通量应用嵌套的API响应? [英] How do I handle nested API responses in a Flux application?
问题描述
我移植现有的应用流量和我有点困惑的一个话题。
说我有返回两个或三个级别的嵌套对象几个API端点。
I'm porting an existing app to Flux and I'm a bit confused about one topic. Say I have several API endpoints that return two- or three-level nested objects.
例如, GET /条
可能返回模式的JSON响应
For example, GET /articles
may return a JSON response of schema
articles: article*
article: {
author: user,
likers: user*
primary_collection: collection?
collections: collection*
}
collection: {
curator: user
}
如你所见,有不同层次的嵌套各类用户的:
As you see, there are all kinds of users at different levels of nesting:
-
的文章[I] .author
-
的文章[I] .likers [I]
-
的文章[I] .primaryCollection.curator
-
的文章[I] .collections [I] .curator
articles[i].author
articles[i].likers[i]
articles[i].primaryCollection.curator
articles[i].collections[i].curator
如果我想更新 UserStore
新鲜的数据随时文章牵强,我不得不写检查上的文章API响应所有嵌套实体滔天方法。此外,将有很多重复的,因为也有不同的模式等API端点,有时文章嵌入到用户(如 GET /用户/发表
)
If I want to update UserStore
with fresh data any time articles are fetched, I'd have to write a monstrous method that checks all nested entities on article API response. Moreover, there would be a lot of duplication because there are also other API endpoints with different schemas, and sometimes articles are embedded inside users (e.g. GET /user/published
).
有没有助焊剂店更清洁的方式提取嵌套实体的所有API响应?
Is there a cleaner way for Flux stores to extract nested entities out of all API responses?
推荐答案
陈静(光通量的创造者和传道者的一个建议的方法)是他们到达前门店拉平API响应。我写了一个小库,做到了这一点:它标准化
An approach suggested by Jing Chen (one of Flux creators and evangelists) was to flatten API responses before they reach the Stores. I wrote a small library that does just that: it normalizes
[{
id: 1,
title: 'Some Article',
author: {
id: 1,
name: 'Dan'
}
}, {
id: 2,
title: 'Other Article',
author: {
id: 1,
name: 'Dan'
}
}]
到
{
result: [1, 2],
entities: {
articles: {
1: {
id: 1,
title: 'Some Article',
author: 1
},
2: {
id: 2,
title: 'Other Article',
author: 1
}
},
users: {
1: {
id: 1,
name: 'Dan'
}
}
}
}
(注意没有重复,结构是平的。)
(Note there is no duplication and the structure is flat.)
Normalizr ,您可以:
Normalizr lets you:
- 内的其他实体,对象和数组巢实体
- 联合实体模式来恩preSS任何一种API响应
- 自动合并同一与实体的ID(有一个警告,如果他们有所不同)
- 使用自定义的ID属性(例如塞)
要使用它,你需要定义你的实体和嵌套规则,并用它们来改变JSON:
To use it, you need to define your entities and nesting rules and use them to transform JSON:
var normalizr = require('normalizr'),
normalize = normalizr.normalize,
Schema = normalizr.Schema,
arrayOf = normalizr.arrayOf;
// First, define a schema:
var article = new Schema('articles'),
user = new Schema('users'),
collection = new Schema('collections');
// Define nesting rules:
article.define({
author: user,
collections: arrayOf(collection)
});
collection.define({
curator: user
});
// Usage:
// Normalize articles
var articlesJSON = getArticleArray(),
normalized = normalize(articlesJSON, arrayOf(article));
// Normalize users
var usersJSON = getUsersArray(),
normalized = normalize(usersJSON, arrayOf(user));
// Normalize single article
var articleJSON = getArticle(),
normalized = normalize(articleJSON, article);
这可以让你将其传递给调度员焊剂正常化之前,任何XHR回应。
该商店将只需要在相应的字典自我更新:
This allows you to normalize any XHR response before passing it to Flux Dispatcher. The Stores will only need to update themselves from the corresponding dictionary:
// UserStore
UserStore.dispatchToken = AppDispatcher.register(function (payload) {
var action = payload.action;
switch (action.type) {
// you can add any normalized API here since that contains users:
case ActionTypes.RECEIVE_ARTICLES:
case ActionTypes.RECEIVE_USERS:
// Users will always be gathered in action.entities.users
mergeInto(_users, action.entities.users);
UserStore.emitChange();
break;
}
});
// ArticleStore
AppDispatcher.register(function (payload) {
var action = payload.action;
switch (action.type) {
// you can add any normalized API here since that contains articles:
case ActionTypes.RECEIVE_ARTICLES:
// Wait for UserStore to digest users
AppDispatcher.waitFor([UserStore.dispatchToken]);
// Articles will always be gathered in action.entities.articles
mergeInto(_articles, action.entities.articles);
ArticleStore.emitChange();
break;
}
});
这篇关于我该如何处理通量应用嵌套的API响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!