使用normalizr和redux标准化我的JSON响应

时间:2018-10-19 20:23:43

标签: reactjs redux normalizr

我正在尝试重塑Redux存储,以便可以查询并轻松过滤数据。

我有一个API端点,可以返回订单。 订单看起来像这样:

Order
 + references
    + item_details
       - category_id
       - product_id
       - product

因此,一个订单具有许多引用,并且引用具有许多item_details。 物品详细信息具有类别和产品。

  const data = {
    id: 3939393,
    discount: 0,

    references: [
    {
      id: 123,
      order_id: 3939393,
      name: "order 1",
      item_details: [
        {
          id: 100,
          order_id: 3939393,
          product_id: 443,
          sort_order: 1,
          category_id: 400,
          product: {
            id: 443,
            name: "hello world",
            price: 199
          }
        },
        {
          id: 200,
          order_id: 3939393,
          product_id: 8080,
          sort_order: 2,
          category_id: 500,
          product: {
            id: 8080,
            name: "hello json",
            price: 299
          }
        }
      ]
    }
  ]
};

export default data;

到目前为止,我的架构定义如下:

export const productSchema = new schema.Entity("products");
export const itemDetailSchema = new schema.Entity("itemDetails", {
  product: productSchema
});
export const references = new schema.Entity("references", {
  item_details: new schema.Array(itemDetailSchema)
});
export const orderSchema = new schema.Entity("orders");

const result = normalize(data, orderSchema);

console.log("result is: " + JSON.stringify(result));
  1. 如何在标准化JSON的单独部分中获得产品?目前,这些产品仍嵌入JSON中。

我是否将使用normalizr创建状态“索引”类型,如下所示:

productsInReferences: {
  123: [400, 8080]
}

如果没有,我该如何生成这些类型的JSON查找?

到目前为止,我已经使用自己的代码创建了一个codeandbox。 https://codesandbox.io/s/xpl4n9w31q

1 个答案:

答案 0 :(得分:0)

我通常认为规范化方案从最深的嵌套结构一直到包含这些情况的数据的方案。请记住,您可以通过[someSchema]进行显式数组定义,每个级别都应包含在嵌套模式中,在这种情况下,您忘记了references: [referenceSchema]上的orderSchema

正确的归一化为:

// Product Schema
const productSchema = new schema.Entity("products");
// Item detail schema containing a product schema OBJECT within the property product
const itemDetailSchema = new schema.Entity("itemDetails", {
    product: productSchema
});
// Reference schema containing an ARRAY of itemDetailSchemes within the property item_details
const referenceSchema = new schema.Entity("references", {
    item_details: [itemDetailSchema]
});
// Order schema containing an ARRAY of reference schemes within the property references
const orderSchema = new schema.Entity("orders", {
    references: [referenceSchema]
});


const result = normalize(data, orderSchema);
console.dir(result);

这是归一化后的结果。

Object
    entities:
        itemDetails: {100: {…}, 200: {…}}
        orders: {3939393: {…}}
        products: {443: {…}, 8080: {…}}
        references: {123: {…}}
    result: 3939393