normalizr實踐使用(個人總結，僅供參考)

normalizr實踐使用

---

原數據

（自編數據，本數據僅供參考）

var aaaObj ={
    "id" : "00000000000000000000000000005187",
    "eshop_id" : "",
    "categorylist" : [
        {
            "id": "434b927779aac23a2c1e1e3a82988ffb",
            "name": "休閑零食",
            "children": [
                {
                    "id": "984c93f9be8e4aad35f70314f8602556",
                    "name": "果干蜜餞",
                    "aaa":[
                      {
                        "ccc":"1",
                        "aa":"11",
                        "bb":"22"
                      },
                    ]
                }, {
                    "id": "86f6d05d71d5c126063f2b2e3ad2eba0",
                    "name": "肉干肉脯",
                    "aaa":[
                      {
                        "ccc":"2",
                        "aa":"11",
                        "bb":"22"
                      },
                    ]
                }, {
                    "id": "29a5f4195ce5950a053e5513f26b3de5",
                    "name": "膨化食品",
                    "aaa":[
                      {
                        "ccc":"3",
                        "aa":"11",
                        "bb":"22"
                      },
                    ]
                }
            ]
        }, {
            "id": "a0679cba84a70cb735373a128bfcf912",
            "name": "酒",
            "children": [
                {
                    "id": "6ac3faa1324946e8bf670c6bde4b7725",
                    "name": "白酒"
                }, {
                    "id": "ff4b63978e4b1e76d131ce755b2c2fbe",
                    "name": "水類"
                }
            ]
        }
    ],
    "prolist" : [
        {
            "id": "062820bde7a686df1bbc61bcd0a67097",
            "eshop_id": "00000000000000000000000000005187",
            "is_combo": "no",
            "is_combo_split": "no",
            "content_name": "圓藍藍莓果脯40g",
            "off_price": "13.00",
        }
    ],
    "totalpage" : 1
}

---

normalizr 處理

import { schema } from 'normalizr';
/* product Schema */
const product = new schema.Entity('products');
export const arrayOfProducts = [product];
/* category Schema */
const firstCategory = new schema.Entity('firstCategories',{}, { idAttribute: 'id' }); //默認為id可不設置
const secondCategory = new schema.Entity('secondCategories');
const threeCategory = new schema.Entity('threeCategory',{},{ idAttribute: 'ccc' }); //設置主鍵為ccc，不設置時默認為id
firstCategory.define({
  children: [secondCategory],  //數組形式會返回result
  productIds: arrayOfProducts, //arrayOfProducts = [product];
});
secondCategory.define({
  aaa:[threeCategory]   //分離出三級菜單(threeCategory)，用二級菜單填充(secondCategories)，主鍵為ccc
})
/* eshop Schema */
export const eshopSchema = {
  categoryIds: [firstCategory], //由於categoryIds是數組，所以firstCategory形式是[firstCategory]
  productIds: [product],
};
// 處理接口返回的數據, 格式化如下：
// {
//   shopInfo: {...}
//   categoryIds: [...]
//   productIds: [....]
// }
//處理數據中的key值
export function formatEshopData(rawObj) {
  const obj = rawObj;
  Object.keys(obj).forEach((key) => {
    if (key === 'prolist') {
      obj.productIds = obj[key];
      delete obj[key];
    }
    if (key === 'categorylist') {
      obj.categoryIds = obj[key];
      delete obj[key];
    }
  });
  return obj;
}
/* emall Schema */
export const emallSchema = eshopSchema;
export function formatEMallData(rawObj) {
  const obj = rawObj;
  Object.keys(obj).forEach((key) => {
    if (key === 'prolist') {
      obj.productIds = obj[key];
      delete obj[key];
    }
    if (key === 'categorylist') {
      obj.categoryIds = obj[key];
      delete obj[key];
    }
  });
  return obj;
}
/* catpro Schema */
export const catproSchema = emallSchema;
export const formatCatproData = formatEMallData;

---

normalizr 后

    import { normalize } from 'normalizr';
    const response = normalize(schema.formatEshopData(aaaObj), schema.eshopSchema);
    console.log(end)

---

var end = {
    "entities": {
        "threeCategory": {
            "1": {
                "ccc": "1",
                "aa": "11",
                "bb": "22"
            },
            "2": {
                "ccc": "2",
                "aa": "11",
                "bb": "22"
            },
            "3": {
                "ccc": "3",
                "aa": "11",
                "bb": "22"
            }
        },
        "secondCategories": {
            "984c93f9be8e4aad35f70314f8602556": {
                "id": "984c93f9be8e4aad35f70314f8602556",
                "name": "果干蜜餞",
                "aaa": ["1"]
            },
            "86f6d05d71d5c126063f2b2e3ad2eba0": {
                "id": "86f6d05d71d5c126063f2b2e3ad2eba0",
                "name": "肉干肉脯",
                "aaa": ["2"]
            },
            "29a5f4195ce5950a053e5513f26b3de5": {
                "id": "29a5f4195ce5950a053e5513f26b3de5",
                "name": "膨化食品",
                "aaa": ["3"]
            },
            "6ac3faa1324946e8bf670c6bde4b7725": {
                "id": "6ac3faa1324946e8bf670c6bde4b7725",
                "name": "白酒"
            },
            "ff4b63978e4b1e76d131ce755b2c2fbe": {
                "id": "ff4b63978e4b1e76d131ce755b2c2fbe",
                "name": "其它酒水類"
            }
        },
        "firstCategories": {
            "434b927779aac23a2c1e1e3a82988ffb": {
                "id": "434b927779aac23a2c1e1e3a82988ffb",
                "name": "休閑零食",
                "children": ["984c93f9be8e4aad35f70314f8602556", "86f6d05d71d5c126063f2b2e3ad2eba0", "29a5f4195ce5950a053e5513f26b3de5"]
            },
            "a0679cba84a70cb735373a128bfcf912": {
                "id": "a0679cba84a70cb735373a128bfcf912",
                "name": "酒",
                "children": ["6ac3faa1324946e8bf670c6bde4b7725", "ff4b63978e4b1e76d131ce755b2c2fbe"]
            }
        },
        "products": {
            "062820bde7a686df1bbc61bcd0a67097": {
                "id": "062820bde7a686df1bbc61bcd0a67097",
                "eshop_id": "00000000000000000000000000005187",
                "is_combo": "no",
                "orders": 2,
                "business_status": "open",
            }
        }
    },
    "result": {原數據}
}

官網案例

---

原創，轉載請注明:http://www.cnblogs.com/chunlei36