ImmutableJSオブジェクトの深い設定

Question

.set()を使用して不変オブジェクトの値を設定しようとしています。値は必要に応じて更新されますが、後で.getIn()を使用してオブジェクトからフェッチできません。これは、オブジェクトの子を不変として設定していないからです。 immutable.jsにはこれを行うためのメソッドがありますか？私は.set(fromJS('rooms', roomMap))のようにfromJS()のオブジェクトをラップすることができますが、これは乱雑に思えます。これを行う正しい方法は何ですか？あなたはfromJSによって作成された入れ子構造でsetを使用することはできません

const state = Immutable.fromJS({ 
     rooms: false 
    }); 

    const roomMap = 
    { 
     "roomid1": { 
      "id": "roomid1", 
      "name": "Room 101", 
     }, 
     "roomid2": { 
      "id": "roomid2", 
      "name": "Room 102", 
     }, 
    }; 

    var newState = state.set('rooms', roomMap); 
    console.log(newState.getIn(['rooms', 'roomid1']));; 

https://jsfiddle.net/z0a4p199/1/

Answer 1

を使用する必要がありますあなたの部屋のマップは、プレーンjavascriptオブジェクト、ないimmutalblejsマップです。

したがって、state.set('rooms', roomMap)を実行すると、ルームの値をプレーンなjavascriptオブジェクトに設定します。

newState.getIn(['rooms', 'roomid1'])：これはnewStateがjavascriptオブジェクトの場合のみ有効です。

roomMapをimmutablejsマップに変換するか、plainid javascript形式でroomid1にアクセスする必要があります。

代替1：

roomMap = Immutable.fromJS(roomMap) 
state.update('rooms', (oldvalue)=>(roomMap)) 
newState.getIn(['rooms', 'roomid1']) 

代替2：

newState.get('rooms').roomid1 

JS Filddle

Answer 2

。

mergeDeepまたはupdateInのいずれかを使用する必要があります。あなたのケースでは、あなたがmergeDeep

const state = Immutable.fromJS({ 
 
    rooms: false 
 
}); 
 
console.log(state.get('rooms')); 
 

 
const roomMap = { 
 
    "roomid1": { 
 
    "id": "roomid1", 
 
    "name": "Room 101", 
 
    }, 
 
    "roomid2": { 
 
    "id": "roomid2", 
 
    "name": "Room 102", 
 
    }, 
 
}; 
 

 
const newState = state.mergeDeep({ 
 
    rooms: roomMap 
 
}); 
 
console.log(newState.get('rooms'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>