我该如何处理通量应用嵌套的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屋！