如何在 Immutable.Map({}) 中更改 ImmutableList({}) 中项目的属性

Question

如何更改ImmutableList({}) 中位于Immutable.Map({}) 内的项目的属性？

我有：

const initialState = Immutable.Map({
    width: window.board.width,
    height: window.board.height,
    lines: Immutable.List([
        Immutable.Map({id: 1, active: false, name: 'Some name'}),
        Immutable.Map({id: 2, active: false, name: 'Sad name'}),
        Immutable.Map({id: 3, active: true, name: 'Cool name'})
    ])
});

假设我想在列表中设置带有id 1 的项目。然后将其属性 active 更改为 true。我还想将 List 中所有其他项目的属性 active 设置为 false。

我该怎么做？提前非常感谢。

编辑（最终解决方案）：

export function activateLine(lineId) {
    return function (dispatch, getState) {
        const updatedLines = getState().board.update('lines', Immutable.List(),
            (oldList) => oldList.map((listItem) => {
                return listItem.set("active", (listItem.get("id") === lineId));
            })).get('lines');

        return dispatch({
            type: types.ACTIVATE_LINE,
            payload: updatedLines
        });
    };
}

Answer 1

您可以像这样遍历不可变对象（尽管我强烈建议您将整个对象设置为不可变对象）。您可以通过仅使用不可变本身来减少代码行并使其更优雅 -

const changeImmutableObject = initialState.update('lines', Immutable.List(),
    (oldList) => oldList.map((listItem) => {
        if(listItem.get("id") === 1) {
            return listItem.set("active", true);
        } else {
            return listItem.set("active", false);
        }
    })
  )

查看工作小提琴 - https://jsfiddle.net/o04btr3j/214/

这会更新对象内的 list 键（如果它不存在，则默认为不可变列表），然后映射属性。如果 id 为 1，则将 active 设置为 true，否则将 active 设置为 false。

你也可以只 initialState.toJS() 你的不可变对象并在纯 js 中执行你的逻辑，或者执行 immutableobject.get('property') 并修改然后将其设置回你的对象中，但是我建议你只使用内置的方法不可变，因为它代码少得多。

另外，如果我没记错的话，你可以这样做：

const initialState = Immutable.fromJS({
width: window.board.width,
height: window.board.height,
lines:[
    {id: 1, active: false, name: 'Some name'},
    {id: 2, active: false, name: 'Sad name'},
    {id: 3, active: true, name: 'Cool name'}
]
});

你可以通过 immutable.fromJS() 一个对象把它变成一个不可变对象。并且所有不可变对象都应该有一个 .toJS 方法，以将它们转换回常规的 javascript 对象/列表/任何东西。

Answer 2

我在 link to solution on jsbin.com 上创建了轻巧的示例

const initialState = Immutable.Map({
    lines: Immutable.List([
        Immutable.Map({id: 1, active: false, name: 'Some name'}),
        Immutable.Map({id: 2, active: false, name: 'Sad name'}),
        Immutable.Map({id: 3, active: true, name: 'Cool name'})
    ])
});


console.log('initialState', initialState.toJS())

// update lines, map over items and set active to false
const stateLinesAllNotActive = initialState.updateIn(
  ['lines'], 
  items => items.map((item) => item.set('active', false)) 
)

console.log('stateLinesAllNotActive', stateLinesAllNotActive.toJS())

// lines and key for item with id === 1, then set active to this item
const stateFirstActive = stateLinesAllNotActive.updateIn(
  [
    'lines', 
    stateLinesAllNotActive.get('lines').findIndex((item) => (item.get("id") === 1))
  ],
  item => item.set("active", true)
)

console.log('stateFirstActive', stateFirstActive.toJS())

Answer 3

以下内容应该可行，但是，正如有人所说...我认为完整更新可能会更好...

const initialState = Immutable.Map({
    lines: Immutable.List([
        Immutable.Map({id: 1, active: false, name: 'Some name'}),
        Immutable.Map({id: 2, active: false, name: 'Sad name'}),
        Immutable.Map({id: 3, active: true, name: 'Cool name'})
    ])
});

let lines = initialState.get('lines'); 
let id = 1; // what you want update...
let updater = item => {
  let updated = item.set('name', "Giuseppe");
  
  return updated;
};
let index = lines.findIndex((i) => i.get("id") === id);
let result = lines.update(index, updater);

initialState.set("lines", result);

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