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

【问题标题】：Normalizr with Redux with nested array of objects带有嵌套对象数组的 Redux 的 Normalizr
【发布时间】：2021-08-11 07:27:01
【问题描述】：

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

我有一个对象数组

const data = [
  {
    data_detail: [
      {
        category: 'newCategory',
        _id: '123',
      },
    ],
    _id: 'abc_id',
    customer: {
      _id: '456',
      email: 'hello@gmail.com',
      name: 'Bob',
    },
    date: '2021-01-10T01:51:24.387Z',
  },
];

我需要将其转换为

const normalizedResponse = {
  customers: {
    '456': {
      _id: '456',
      email: 'hello@gmail.com',
      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": "hello@gmail.com",
          "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": "hello@gmail.com",
          "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 代码

标签： redux react-redux normalizr

【解决方案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": "hello@gmail.com", 
        "name": "Bob"
      }
    },
    "orders": {
      "abc_id": {
        "data_detail": ["123"],
        "_id": "abc_id",
        "customer": "456",
        "date": "2021-01-10T01:51:24.387Z"
      }
    }
  },
  "result": ["abc_id"]
}

【讨论】：