Immutable.js expliqué en détail

Cette fois, je vais vous apporter une explication détaillée d'Immutable.js. Quelles sont les précautions lors de l'utilisation d'Immutable.js. Voici des cas pratiques, jetons un coup d'œil.

Application d'Immutable.js dans le projet React + Router + Redux

Première introduction d'Immutable :

L'émergence d'Immutable.js est née de l'idée de programmation fonctionnelle, c'est-à-dire que toutes les données doivent être copiées plutôt que modifiées directement. Pour une introduction connexe, veuillez consulter son site officiel :
https://facebook.github.io/immutable-js/

Donc, si vous avez une certaine expérience en programmation, vous pouvez comprendre qu'Immutable est une autre bibliothèque de structures de données. C'est comme passer d'ArrayList à LinkedList. Sous Immutable.js, il passe de la syntaxe JavaScript propre Array (qui est []) et Object ({ }) à Immutable.List et Immutable.Map.

Mais après tout, ArrayList et LinkedList héritent tous deux de List, et les interfaces sont relativement cohérentes, ce n'est donc pas un gros problème de les remplacer. Cependant, si vous souhaitez utiliser Immutable pour remplacer JavaScript natif, ce n'est pas un gros problème. sera un peu plus compliqué.

var map1 = Immutable.Map({a:1, b:2, c:3});var map2 = map1.set('b', 50);
map1.get('b'); // 2/* ----------------悠长悠长的分割线---------------- */var list1 = Immutable.List.of(1, 2);var list2 = list1.push(3, 4, 5);var list3 = list2.unshift(0);var list4 = list1.concat(list2, list3);

C’est compliqué, mais il s’agit simplement d’être plus attentif.

Parlons ensuite de redux et du routeur

Redux a une méthode combineReducers qui peut diviser les réducteurs. Par exemple :

combineReducers({  user: userReducer,
  dashboard: dashboardReducer,
})

Ensuite, la question se pose :
Lorsque vous obtenez l'état, utilisez-vous state.get('user') ou state.user ?

Utilisez évidemment state.user. Parce que combineReducers ne connaît pas Immutable.
(Ne me dites pas de les mélanger. La structure à une seule couche peut être comme ça. Qu'en est-il de plusieurs couches ? Qu'en est-il de la coopération avec plusieurs personnes ? Si vous êtes dupe à un endroit, des erreurs seront signalées partout)

Donc, si vous souhaitez utiliser un React + Router + Redux Si vous utilisez Immutable dans votre projet, vous pouvez soit l'utiliser localement (s'il est utilisé localement, ce sera fondamentalement un véritable cauchemar), soit vous pouvez l'utiliser comme un ensemble complet.
Alors regardez ici (ce type a réécrit combineReducers) :
https://github.com/gajus/redux-immutable

Utilisez leurs combineReducers, vous pouvez être assuré. Utilisez state.get('user ').

Tout en résolvant combineReducers, ils ont également résolu le problème de React-Router-Redux (imaginez que le routeur est utilisé comme module de routage sous l'état mais ne sait pas utiliser Immutable) :

https://github.com/gajus/redux-immutable#using-with-react-router-redux

Cela dit, comment l'utiliser

Tout d'abord, votre le projet est React + Configuration standard du routeur + Redux.
Ensuite, vous devez présenter Immutable.

Ensuite, vous devriez faire ceci :

Introduire redux-immutable

Configurer l'historique selon le README.md de redux-immutable (Ctrl+C, Ctrl+V)

Lors de la fusion de tous les réducteurs, utilisez combineReducers de redux-immutable

Utilisez Immutable.List et Immutable.Map d'Immutable.js pour toutes les données entrant et sortant de l'état (c'est le vrai sujet)

Y a-t-il autre chose auquel vous devriez prêter attention ?

Problèmes avec les composants :

L'idée venant de redux est de diviser les composants en Smart et Dumb. Le composant Smart est responsable de la réception des données et le composant Dumb est responsable de l'utilisation des données et se concentre uniquement sur les accessoires. Alors, Immutable couvre-t-il Smart and Dumb ?

Mon opinion personnelle est la suivante :
Les composants stupides doivent essentiellement être abstraits et partagés par plusieurs projets. Il vaudrait mieux que ces composants ne prennent pas en charge Immutable, sinon ils seront liés à Immutable.

Donc, les données de Dumb sont natives de JavaScript, cela ne signifierait-il pas que nous ne pouvons pas profiter des avantages d'Immutable ?
Les données ont été copiées sur le composant, il n'y a donc rien de mal à sacrifier un peu pour la compatibilité, n'est-ce pas ?

La conclusion derrière cette idée est la suivante :
Le conteneur dans le concept redux effectue également une conversion mutuelle entre Immuable et natif lors de la connexion entre l'état et les accessoires, et entre les accessoires et la répartition. (Modèle d'adaptateur)

Lors des tests :

Vous souhaiterez console.loger les données actuelles. Taper Immutable.List semble très fatiguant. Il est recommandé d'utiliser console.log (imtb. toJS())

Mais qu'en est-il lors du débogage ?

Hors sujet

Ce serait bien si ces fonctionnalités étaient intégrées à JavaScript lui-même.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment interagir avec js dans le développement Android

Modularisation JS-RequireJS

Un éditeur de texte riche de style document graphite réalisé avec Vue.js 2.0+

chemin d'accès à node.js Explication détaillée des modules

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!