如何使用 Immutable 删除 List 中的某些元素？

Question

我将 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}？

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

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

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

如何使用 Immutable 删除 List 中的某些元素？

How can I remove some element in List with Immutable?

reactjs

immutable.js

redux