使用 immutable.js 在 React/Redux 中更新深层对象值的状态

Question

我有这个非常嵌套的状态数组，需要按 Employee、Task 和 Week 更新 Hours 字段。我尝试了多种方法来使用 Immutable 但没有成功，有什么帮助吗？

这是我的数据示例：

[{
  "Employee": "John Doe",
  "Other Data": "test",
  "Tasks": [{
    "AccessType": "Confidential",
    "DueDate": "2016-02-26 23:59:59",
    "taskId": "3",
    "TaskTitle": "testTitle",
    "Weeks": {
      "2016-10-10": {
        "Hours": "3"
      }
    }
  }]
}, {
  "Employee": "Bill Der",
  "Other Data": "test",
  "Tasks": [{
    "AccessType": "Confidential",
    "DueDate": "2016-02-26 23:59:59",
    "taskId": "3",
    "TaskTitle": "testTitle",
    "Weeks": {
      "2016-10-10": {
        "Hours": "3"
      }
    }
  }]
}]

Answer 1

您缺少大量信息，我无法为您完全回答这个问题，但我可以向您展示我将如何做这样的事情。

您可以利用不可变 js 为您提供的所有功能。因此，假设您有一个对象，其中包含变异您的不可变对象所需的信息，如下所示：

var changeHours = {
  "Employee": "John Doe",
  "TaskTitle": "testTitle",
  "Week": '2016-10-10',
  "Hours": "5"
}

我们有一个像你这样设置的基本状态：

 var myState = Immutable.fromJS([{
  "Employee": "John Doe",
  "Tasks": [{
    "AccessType": "Confidential",
    "DueDate": "2016-02-26 23:59:59",
    "taskId": "3",
    "TaskTitle": "testTitle",
    "Weeks": {
      "2016-10-10": {
        "Hours": "3"
      }
    }
  }]
}]);

注意：我没有添加更多数组，但我们将映射它们以便将它们考虑在内。

您可以使用不可变映射来迭代并找到您要查找的项目，如下所示：

  var newstate = myState.map((k, v) => {
  if (k.get('Employee') === changeHours.Employee) {
    return k.get('Tasks').map((k, v) => {
      if (k.get('TaskTitle') === changeHours.TaskTitle) {
                return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours);
      }
      return k;
    })
    return k;
  }
 return k;
});

看到它在行动 - http://fiddle.jshell.net/djj6u8xL/63/ 。我正在使用 map 遍历每个数组级别，并通过根据我们的 changeHours 对象和不可变获取来检查找到正确的节点，然后一旦我处于正确的级别，我就使用 setIn。您也可以使用 updateIn，这取决于您的场景。

以后，请提供您问题的所有信息，而不仅仅是数据的图片，它会更容易帮助您:)（不必手动输入数据结构）。

编辑：根据评论更新 - http://fiddle.jshell.net/qxbq1nq3/9/

代码：

  function newTasks(k) {
  return k.get('Tasks').map((k, v) => {
    if (k.get('TaskTitle') === changeHours.TaskTitle) {
      return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours);
    }
    return k;
  });
}

var newstate = myState.map((k, v) => {
  if (k.get('Employee') === changeHours.Employee) {
    return k.set('Tasks', newTasks(k));
  }
  return k;
});