ImmutableJS pour l'état du composant React

Question

J'ai donc décidé d'utiliser ImmutableJS pour travailler avec Redux. Maintenant, je me demande s'il est pratique de l'utiliser pour gérer le composant React state. Je codé comme suit:

class Navigation extends React.Component { 
    constructor(props) { 
    super(props); 
    const $$fixedLinks = Immutable.fromJS(this.props.fixedLinks); 
    const $$dynamicLinks = Immutable.fromJS(this.props.dynamicLinks); 

    this.state = { 
     fixedLinks: this.addHrefs($$fixedLinks), 
     dynamicLinks: this.addHrefs($$dynamicLinks), 
    }; 
    } 

    // Given a list of shape (id, name) we need to 
    // add href for the links 
    addHrefs = list => list.map(item => item.set('href', toUnderscore(item.get('name')))) 

    render() { 
    const fixed = this.state.fixedLinks.map(
     link => (
     <Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} /> 
    ), 
    ); 
    const dynamic = this.state.dynamicLinks.map(
     link => (
     <Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} /> 
    ), 
    ); 
    return (
     <Anchor> 
     {fixed} 
     {dynamic} 
     </Anchor> 
    ); 
    } 
} 

Comme vous pouvez le voir $$ indique un objet immuable. Mais alors je veux ajouter une nouvelle propriété avec addHrefs et l'enregistrer à state.

Il fonctionne comme un charme. Mais il est un peu maladroite ce qui suit:

<Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} /> 

voir? En utilisant get() pour obtenir des valeurs de l'objet immuable.

Maintenant, quelques questions:

1. Est-ce une bonne idée (ou approche) à utiliser pour la gestion ImmutableJS état React.Component?
2. Si je peux utiliser ImmutableJS à cette fin, this.state devrait être un objet immuable? Si oui, comment faire face à this.setState()?
3. Sinon, je ne peux pas utiliser loadash car il ne fonctionnera pas avec ImmutableJS, comment puis-je traiter avec les états immuables dans React.Component?

Answer 1

1. Est-ce une bonne idée (ou approche) d'utiliser ImmutableJS pour la gestion de l'Etat dans React.Component?

Je ne vois pas pourquoi ce serait une idée mauvaise. Il est même mentionné dans React docs.

2. Si je peux utiliser ImmutableJS à cet effet, devrait this.state être un objet immuable? Si oui, comment faire face à this.setState()?

C'est vraiment à vous de décider. Il y a des avantages à avoir un état de composant immuable (comme pouvoir utiliser PureComponent et obtenir des performances optimisées).

Je ne suis pas sûr de savoir ce que vous entendez par "traiter avec this.setState()". Vous continuez à l'utiliser comme d'habitude: récupérez votre état, mettez-le à jour (obtenant ainsi un nouvel objet), appelez le setState avec le nouvel objet.

1. Sinon, je ne peux pas utiliser loadash car il ne fonctionnera pas avec ImmutableJS, comment puis-je traiter avec les états immuables à l'intérieur React.Component?

Vous pouvez appeler const myState = this.state.toJS() et utiliser lodash avec elle. N'essayez simplement pas de changer l'état du composant en modifiant quelque chose dans myState car cela ne fonctionnera pas.

J'espère que cela répond à vos questions, si je les ai compris correctement :)