带有嵌套对象数组的 Redux 的 Normalizr

Posted 2023-02-22

【中文标题】带有嵌套对象数组的 Redux 的 Normalizr

【英文标题】：Normalizr with Redux with nested array of objects

【发布时间】：2021-08-11 07:27:01

【问题描述】：

我刚刚开始在 Redux 中使用 normalizr，但我无法让它工作。 虽然我可以用纯 javascript 做到这一点。

我有一个对象数组

const data = [
  
    data_detail: [
      
        category: 'newCategory',
        _id: '123',
      ,
    ],
    _id: 'abc_id',
    customer: 
      _id: '456',
      email: '[e-mail]',
      name: 'Bob',
    ,
    date: '2021-01-10T01:51:24.387Z',
  ,
];

我需要将其转换为

const normalizedResponse = 
  customers: 
    '456': 
      _id: '456',
      email: '[e-mail]',
      name: 'Bob',
    ,
  ,
  details: 
    '123': 
      category: 'newCategory',
      _id: '123',
    ,
  ,
  orders: 
   'abc_id: 
      order_detail: [123],
      _id: 'abc_id',
      customer: '456',
      date: '2021-01-10T01:51:24.387Z',
    ,
  ,
;

第 1 步：仅显示 orders

我做什么：

const userSchema = new schema.Entity(
  'orders',
  );

const userListSchema = new schema.Array(userSchema);


const normalizedData = normalize(data, userListSchema);

我得到了什么

  "entities": 
    "orders": 
      "abc_id": 
        "data_detail": [
          
            "category": "newCategory",
            "id": "123"
          
        ],
        "id": "abc_id",
        "customer": 
          "id": "456",
          "email": "[e-mail]",
          "name": "Bob"
        ,
        "date": "2021-01-10T01:51:24.387Z"
      ,
      "abc_id-02": 
        "data_detail": [
          
            "category": "newCategory1",
            "id": "123-02"
          
        ],
        "id": "abc_id-02",
        "customer": 
          "id": "456-02",
          "email": "[e-mail]",
          "name": "Bob"
        ,
        "date": "2001-01-10T01:51:24.387Z"
      
    
  ,
  "result": [
    "abc_id",
    "abc_id-02"
  ]

我想得到什么：

 orders: 
   'abc_id: 
      order_detail: [123],
      _id: 'abc_id',
      customer: '456',
      date: '2021-01-10T01:51:24.387Z',
    ,
  ,

问题：如何从订单中删除一些字段并添加新字段？

【问题讨论】：

是的，这里确实没有足够的信息来给出任何答案:) 我们需要看看你实际尝试了什么。

@markerikson 确定 :) 我添加了一些我尝试过的 normaliz 代码

【参考方案1】：

data 对象中有 3 种不同的实体类型。首先为他们每个人起草一个schema：

const detail = new schema.Entity('details');

const customer = new schema.Entity('customers');

const order = new schema.Entity('orders');

然后回去填写关系。看起来order 是最外层的实体。一个order 包含一个details/categories 数组和一个customer。

const order = new schema.Entity('orders', 
  data_detail: [detail],
  customer,
);

您的所有实体都使用_id 而不是id，因此您需要设置idAttribute。

您的data 是array 的order。您可以使用new schema.Array(order)，但也可以只使用[order]。

这是你的最终代码：

const customer = new schema.Entity("customers", ,  idAttribute: "_id" );

const detail = new schema.Entity("details", ,  idAttribute: "_id" );

const order = new schema.Entity(
  "orders",
  
    data_detail: [detail],
    customer
  ,
   idAttribute: "_id" 
);

const normalizedData = normalize(data, [order]);

这给了你：

  "entities": 
    "details":  
      "123":  
        "category": "newCategory", 
        "_id": "123" 
         
      ,
    "customers": 
      "456":  
        "_id": "456", 
        "email": "[e-mail]", 
        "name": "Bob"
      
    ,
    "orders": 
      "abc_id": 
        "data_detail": ["123"],
        "_id": "abc_id",
        "customer": "456",
        "date": "2021-01-10T01:51:24.387Z"
      
    
  ,
  "result": ["abc_id"]