不可变的js更新列表中的Map

时间:2016-05-13 19:55:42

标签: immutability immutable.js

将嵌套数据推送到List中的Map

谁能告诉我:
如何通过特定用户ID将任务推送到这些用户(列表项)中的任何一个?

提前致谢。

我的代码:

const initialState = Immutable.List([
  Immutable.Map({
    "id": 1,
    "name": "Abe Bell",
    "tasks": [
      {
        "id": 1,
        "title": "Get haircut",
        "status": false
      }
    ]
  }),
  Immutable.Map({
    "id": 2,
    "name": "Chad Dim",
    "tasks": [
      {
        "id": 2,
        "title": "Get real job",
        "status": false
      }
    ]
  })
])

1 个答案:

答案 0 :(得分:0)

首先,你构建这个结构的方式,tasks数组将不是一个不可变的实例,我认为这不是你想要的,你可以使用Immutable.fromJS转换所有嵌套数组并映射到Immutable实例。

您的数据结构的方式您必须浏览用户列表并在ID匹配时执行更新。

这样做的一种方法是使用map

const initialState = Immutable.fromJS([
  {
    "id": 1,
    "name": "Abe Bell",
    "tasks": [
      {
        "id": 1,
        "title": "Get haircut",
        "status": false
      }
    ]
   },
   {
    "id": 2,
    "name": "Chad Dim",
    "tasks": [
      {
        "id": 2,
        "title": "Get real job",
        "status": false
      }
    ]
  }
]);

let userId = 2;

let newState = initialState.map(user => {
    if (user.get('id') !== userId) {
    return user;
  }
  return user.update('tasks', tasks => {    
    return tasks.push(Immutable.fromJS({
      id: 3,
      title: "new task",
      status: false
    }))
  });
});

虽然这可以做你想要的,但我认为你应该将数据更改为地图而不是列表,如果这种操作在你的应用程序中经常发生的话。这将使事情变得更容易,更快捷。

const initialState = Immutable.fromJS({
  "1": {
    "id": 1,
    "name": "Abe Bell",
    "tasks": [
      {
        "id": 1,
        "title": "Get haircut",
        "status": false
      }
    ]
   },
   "2": {
    "id": 2,
    "name": "Chad Dim",
    "tasks": [
      {
        "id": 2,
        "title": "Get real job",
        "status": false
      }
    ]
  }
});

let userId = "2";

let newState = initialState.updateIn([userId, 'tasks'], tasks => {
  return tasks.push(Immutable.fromJS({
    id: 3,
    title: "new task",
    status: false
  }));
});