鏈接Immutable.js方法與深度嵌套地圖/列表

Question

我有一個Immutable.js收集，看起來像這樣：

{ groups: Immutable.Map({ 
    { 
     id: 1, 
     members: Immutable.List 
    },{ 
     id: 2, 
     members: Immutable.List 
    } 
    }) 
} 

我得到從我的服務器更新的成員陣列和組ID。我如何通過id找到正確的組，然後更新成員prop，然後返回一個新的groups集合？

我有這樣的東西到目前爲止，不起作用。

return state.update('groups', groups => { 
    for (let group of groups) { 
    if (group.id === action.id) { 
     group.members = Immutable.fromJS(action.members); 
     // not sure what I would do with updated here 
     //const updated = group.members.set('members', action.members); 
    } 
    } 

    return groups; 
}; 

此外，試過這個，它似乎並沒有完成，因爲console.log從來沒有觸發。

let update = state.get('groups') 
         .find(group => group.id === action.id) 
         .set('members', action.members) 
    console.log(update) // nothing, no error either 

下工作，但必須有比使用fromJS然後toJS一個更好，更優雅的方式。

return state.update('groups', groupsImmutable => { 
    const groups = groupsImmutable.toJS(); 
    for (let group of groups) { 
    if (group.id === activeId) { 
     group.members = action.members; 
     break; 
    } 
    } 

    return Immutable.fromJS(groups); 
}); 

謝謝！

Answer 1

這會工作：

return state.update('groups', groups => { 
    return groups.map(group => { 
     if (group.get('id') === action.id) { 
      return group.set('members', Immutable.fromJS(action.members)) 
     } else { 
      return group 
     } 
    }) 
}) 

你也可以使用findIndex獲得匹配組ID的索引，然後使用setIn更新成員數組：

const updateIndex = state.get('groups').findIndex(group => group.get('id') === action.id); 
if (updateIndex === -1) { // action.id not found 
    return state; 
} else { 
    return state.setIn(['groups',updateIndex,'members'], Immutable.fromJS(action.members)) 
} 

您的實例失敗，因爲你試圖直接修改一個子元素，這不是不可變的工作方式。您需要使用新元素更新整個狀態對象。