更新嵌套状态对象中的单个记录，react-redux

Question

我正在研究一种网格结构，用户可以在其中动态添加节，子节或项目。我在我的redux状态对象中管理这些东西。我的网格的用户界面如下：

我想更新单行记录，而不是再次重新加载整个网格。为此，每当用户更改行的任何单元格值时，我都会调用update-row api，并在此操作成功后尝试使用以下代码在reducer中更新该值。

case UPDATE_ORDER_LINES_SUCCESS:
let stateData = state.get(`GridData`);
      const dataIndex = stateData.children.findIndex(
        (listing) => listing.id === action.row.id  // row id which is updated 
      );
      stateData[0].children[dataIndex] = action.row;
      let data = Object.assign(stateData, { children: stateData.children });
      state = state.set(`GridData`, [data]);

此代码对于第一级子记录（按json对象）正常工作，但是如果用户更新第n级子记录的值，则会出现问题。如何在redux状态下更新该行记录？

我当前的redux状态示例是：

    {
  "views": [
    {
      "id": "5e6b8961ba08180001a10bb6",
      "viewName": "house",
      "description": "house view",
      "name": "house",
      "children": [
        {
          "id": "5e6b8961ba08180001a10bb7",
          "viewName": "house",
          "sectionName": "Temporary",
          "sectionId": "SEC-02986",
          "description": "Temporary",
          "sequenceNumber": 4,
          "refrenceId": "SEC-02986",
          "children": [
            {
              "id": "5e590df71bbc71000118c109",
              "lineDescription": "AutoPickPack01",
              "lineAction": "Rent",
              "quantity": 5,
              "deliveryDate": "2020-02-29T06:00:00+11:00",
              "pickDate": "2020-02-28T06:00:00+11:00",
              "pickupDate": "2020-03-01T06:00:00+11:00",
              "prepDate": "2020-02-28T06:00:00+11:00",
              "returnDate": "2020-03-01T06:00:00+11:00",
              "shippingDate": "2020-02-29T06:00:00+11:00",
              "unitPrice": 7000,
              "children": [
                {
                  "id": "5e590df71bbc71000118c10a",
                  "orderId": "Ord-05788_1",
                  "lineNumber": "01a7b77c-792a-4edb-9b73-132440621968",
                  "purchaseOrderNumber": null,
                  "lineDescription": "29Janserial",
                  "lineAction": "Rent",
                  "quantity": 5,
                  "pricingMethod": "Fixed",
                  "displayUnit": "Days",
                  "unitPrice": 0,
                  "chargeAmount": 0,
                  "pickDate": "2020-02-17T06:00:00+11:00",
                  "prepDate": "2020-02-28T06:00:00+11:00",
                  "shippingDate": "2020-02-29T06:00:00+11:00",
                  "deliveryDate": "2020-02-29T06:00:00+11:00",
                  "pickupDate": "2020-03-01T06:00:00+11:00",
                  "returnDate": "2020-03-01T06:00:00+11:00",
                  "name": "29Janserial",
                  "description": "29Janserial",
                  "discountAmount": "",
                  "discountPrice": ""
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

在reducer中更新嵌套子行数据的最佳方法是什么？

Answer 1

您应该规范化状态，使树变平，并且实体将通过ID引用而不是直接嵌套进行关联。

例如

{
  "entities": {
    "orders": {
      "o1": { "id": "o1", "productIds": ["p1", "p2"] },
      "o2": { "id": "o2", "productIds": ["p2", "p3"] },
      "o3": { "id": "o2", "productIds": ["p3"] }
    },
    "products": {
      "p1": { "id": "p1", "orderIds": ["o1"] },
      "p2": { "id": "p1", "orderIds": ["o1", "o2"] },
      "p3": { "id": "p1", "orderIds": ["o2", "o3"] }
    },
    "views": {
      "v1": { "id": "v1", "childIds": ["v1.1", "v1.2"] },
      "v1.1": { "id": "v1.1", "parentId": "v1" },
      "v1.2": { "id": "v1.2", "parentId": "v1" }}
  },
  "ids": {
    "orders": ["o1", "o2", "o3"],
    "products": ["p1", "p2", "p3"],
    "views": ["v1", "v1.1", "v1.2"]
  }
}

[找到正确的模型并将原始数据转换成更多的前期工作，但是您节省了很多时间，不必处理嵌套的或影响多个数据区域的更新。

Redux docs on normalizing

A (de)normalization transformation tool

A reducer utility library to manage normalized state