ImmutableJS更新リスト

Question

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

作業このコードと動作しません。この1の背後にある理由は何ですか？

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

主な違いは何ですか？

Answer 1

ImmitableJSのリストは「深く不変」ではありません。 itemは参考になります。この操作の後に新しいList参照を作成するには、itemで参照されるオブジェクト内のデータだけでなく、List参照自身も変更する必要があります。

最初の例が動作する理由は、Listからの参照を削除して新しいListを追加することです。これは、新しいList（別の参照）を取得することを意味します。

2番目の例では、参照自体は変更されず、オブジェクト内のデータだけが変更されるため、新しいList参照は取得されません。

Immutable.fromJS()を実行して、このリストを初期化して、最初のリストインスタンスを取得することができます。これは、 "深く不変な"リストを作成し、2番目の例で期待通りに動作します。この出力で

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); 

：

は、この（ here's the fiddle for it）を試してみてくださいあなたのリストを知っているように反応するために

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

は比較がfalseなければならない変更しました。