如何使用不可变删除列表中的某些元素？答案

【问题标题】：How can I remove some element in List with Immutable?如何使用不可变删除列表中的某些元素？
【发布时间】：2016-09-02 02:33:59
【问题描述】：

我将 react + redux 与 Immutable 一起使用，如何使用 Immutable 删除 List 中的某些元素？

import Immutable, { List, Map, fromJS } from 'immutable';

let initialState = fromJS({
    floor: [
        {
            floor: '1',
            rooms: [
                {
                    room: '101'
                },
                {
                    room: '102'
                },
                {
                    room: '103'
                }
            ]
        }
    ]
});

export default function list(state = initialState, action) {
    switch (action.type) {
        //remove some room
        case REMOVE_ROOM:
            //how can I remove some element in List with Immutable?
        default:
            return state;
    }
};

然后，我调度了一个使用 dispatch(removeRoom('102')) 删除一些空间的操作，但是我怎样才能简单地使用 Immutable 删除 {room: 102}？

【问题讨论】：

我建议您保持状态不变。如果您将房间和楼层列表作为该州的单独键，那么您处理数据会容易得多。看看这个库github.com/paularmstrong/normalizr

标签： reactjs redux immutable.js

【解决方案1】：

首先，编写一个函数findRoomPath 来查找您所在州的房间路径。

并使用deleteIn 删除此路径处的值。

var roomPath = findRoomPath(state, 101);
state = state.deleteIn(roomPath);

var state = Immutable.fromJS({
    floor: [
        {
            floor: '1',
            rooms: [
                {
                    room: '101'
                }
            ]
        },
      {
            floor: '2',
            rooms: [
                {
                    room: '104'
                }
            ]
        }
    ]
});

function findRoomPath(state, room) {
  var keyPath = ['floor'];
  state
    .get('floor')
    .find((v, k1) => {
      return v
        .get('rooms')
        .find(function(v, k2) {
          if (+v.get('room') === +room) {
            keyPath.push(k1, 'rooms', k2);
            return true;
          }
        });
    
    });

  return keyPath.length > 1 ?
    keyPath :
    null;
}

function deleteRoom(state, room) {
  var roomPath = findRoomPath(state, room);
  return (roomPath) ?
    state.deleteIn(roomPath) :
    state;
}


console.log(deleteRoom(state, 101).toJS());

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"&gt;&lt;/script&gt;

【讨论】：

你能用filter代替map吗？

【解决方案2】：

我必须说，我对 Immutable 不太熟悉，但这有点干净。我强烈建议您重新考虑您所在州的结构！你会从很多痛苦中解脱出来！

export default function list(state = initialState, {type, payload}) {
    switch (type) {
        //remove some room
        case REMOVE_ROOM:
            return removeRoom(state, payload);
        default:
            return state;
    }
};

const removeRoom (state, roomToRemove) => {
  const floor = state.get('floor').map(floor => {
    const rooms = floor.get('rooms').filter(room => room.get('room') !== roomToRemove)
    return floor.merge({rooms});
  })
  return state.merge({floor});
};

【讨论】：