ImmutableJS 更新列表

Question

此代码有效的原因是什么

  return state.update(action.id, function(item) {
    return {id: item.id, title: item.title, duration: item.duration - 1 };
  });

还有这个不起作用？

  return state.update(action.id, function(item) {
    item.duration = item.duration - 1;
    return item;
  });

主要区别是什么？

Answer 1

ImmitableJS 的列表不是 "deeply immutable"。 item 是参考。为了在这个操作之后得到一个新的 List 引用（并且你的 React 组件知道发生了什么变化），List 引用本身需要改变，而不仅仅是 items.[=17= 引用的对象中的数据。 ]

您的第一个示例起作用的原因是您从列表中删除了一个引用并添加了一个新引用，这意味着您获得了一个新列表（不同的引用）。

第二个示例不会更改引用本身，只会更改对象中的数据，因此您不会获得新的列表引用。

您可以通过执行 Immutable.fromJS() 来初始化此 List 以获取您的初始 List 实例。这将创建一个 "deeply immutable" 列表，其行为将与您在第二个示例中所期望的一样。

试试这个 (here's the fiddle for it):

var list = Immutable.List([ {id: 1}, {id: 2}, {id: 3} ]);

var deepList = Immutable.fromJS([ {id: 1}, {id: 2}, {id: 3} ]);

var mutatedList1 = list.update(0, function(item) {
    item.id = 'x';
    return item;
});

var mutatedList2 = list.update(0, function(item) {
    return {id: 'x' };
});

var mutatedList3 = deepList.update(0, function(item) {
    return {id: 'x' };
});


console.log(list.get(0), mutatedList1.get(0), list.get(0) === mutatedList1.get(0), list === mutatedList1);
console.log(list.get(0), mutatedList2.get(0), list === mutatedList2);
console.log(deepList === mutatedList3);

有了这个输出：

Object {id: "x"} Object {id: "x"} true true
Object {id: "x"} Object {id: "x"} false
false

要让 React 知道您的列表已更改，比较必须是 false。

ImmutableJS 更新列表

ImmutableJS update List

reactjs

immutable.js