Comment supprimer un élément de tableau à l'intérieur de Map in Immutable js?

Question

Je suis nouveau à Immutable et je suis assez confus que la façon de supprimer un élément de tableau qui est à l'intérieur d'une carte. Je ne veux pas utiliser fromJs. Je sais qu'il y a beaucoup de ressources sur Stack Overflow mais ça ne marche pas pour moi.

const test = Map({ 
    arr: [{ 
    id: 1 
    }, { 
    id: 2 
    }, { 
    id: 3 
    }] 
}); 


console.log(test.get('arr')) 

Avant

arr:[{id:1},{id:2},{id:3}] 

Je veux supprimer id: 3

arr:[{id:1},{id:2}] 

Answer 1

Le problème fondamental est que lorsque vous créez une carte, il ne convertit que peu profondément les clés d'objet dans aux touches de la carte. Il ne convertit pas profondément l'objet. C'est correct, mais vous devez gérer cette affaire correctement et cela peut être un peu déroutant quand vous faites face à cette situation.

D'abord, vous devez comprendre que cela ...

const test = Map({ 
    arr: [{ 
    id: 1 
    }, { 
    id: 2 
    }, { 
    id: 3 
    }] 
}) 

... Est-ce

Map { 
    arr: [ 
    { id: 1 }, 
    { id: 2 }, 
    { id: 3 } 
    ] 
} 

Lorsque la valeur stockée à arr est un tableau et non une liste immuable et les valeurs stockés dans ce tableau ne sont pas des objets Maps.

Pour modifier les valeurs mutables, vous devez mettre à jour la carte et modifier la matrice en même temps. Notez que vous voulez le faire de manière immuable afin de ne pas modifier les valeurs mutables stockées dans votre carte immuable. La manière immuable de faire cela ressemblerait à quelque chose comme ceci.

Si vous connaissez l'indice de l'endroit où l'objet avec id: 3 est situé, vous pouvez découper que l'index ...

const i = 2 
test = test // remember that any change to an immutable object creates a new object, so assignment is required 
    .update('arr', (arr) => {  
    return arr.slice(0, i).concat(arr.slice(i + 1)) 
    }) 

Si vous ne connaissez pas l'index, vous pouvez filtrer le tableau. ..

test = test // remember that any change to an immutable object creates a new object, so assignment is required 
    .update('arr', (arr) => {  
    return arr.filter((obj) => obj.id !== 3) 
    }) 

Cette expérience peut être un peu douloureux, j'ai écrit si mudash pour aider spécifiquement lorsqu'ils traitent avec des structures de données imbriquées mixtes. Vous pouvez obtenir la même chose que ci-dessus avec mudash ...

const _ = require('mudash') 

// delete, this correctly traverses mixed structures... 
test = _.delete(test, 'arr.2') 

//update/filter, these methods correctly handle both immutable and stadard js types... 
test = _.update(test, 'arr', (arr) => _.filter(arr, (obj) => obj.id !== 3)) 

Answer 2

Lorsque vous utilisez Immutable.js, vous êtes généralement pas censé utiliser des structures de données JS plaine. Ainsi, vous pouvez créer vos données comme:

test = Map({ arr: List([ Map({ id: 1 }), Map({ id: 2 }), Map({ id: 3 }) ]) }) 

et peut supprimer le troisième objet comme suit:

test.set('arr', test.get('arr').filter(x => x.get('id') != 3))