Pourquoi les objets dans Redux devraient-ils être immuables?

Question

Pourquoi les objets dans Redux seraient-ils immuables? Je sais que certains frameworks tels que Angular2 utiliseront onPush et peuvent tirer parti de l'immuabilité pour comparer les états de vues pour un rendu plus rapide, mais je me demande s'il existe d'autres raisons, car Redux est le framework agnostique et pourtant il mentionne dans ses propres documents l’utilisation de l’immutabilité (quel que soit le cadre).

Apprécier les commentaires.

Answer 1

Redux est une petite bibliothèque qui représente l’état en tant qu’objets (immuables). Et new states en passant l'état actuel à travers des fonctions pures pour créer un objet entièrement nouveau/des états d'application.

Si vos yeux sont vitrés là-bas, ne vous inquiétez pas. En résumé, Redux ne représente pas les modifications de l'état de votre application en modifiant des objets (comme vous le feriez avec des paradigmes orientés objet). Au lieu de cela, les modifications d'état sont représentées sous la forme différence entre l'objet d'entrée et l'objet de sortie (var output = reducer(input)). Si vous modifiez soit input ou output, vous invalidez l'état.

En résumé, l’immuabilité est une exigence de Redux, car celle-ci représente l’état de votre application en tant qu '"instantanés d'objet figé". Avec ces instantanés discrets, vous pouvez enregistrer votre état, ou inverser l’état, et généralement avoir plus de "comptabilisation" pour tous les changements d’état. 

L'état de votre application est seulement modifié par une catégorie de fonctions pures appelées réducteurs. Les réducteurs ont 2 propriétés importantes:

1. Ils ne mutent jamais, renvoyant des objets nouvellement construits: Cela permet de raisonner sur les entrées + sorties sans effets secondaires
2. Leur signature est alwaysfunction name(state, action) {}. Il est donc facile de les composer:

Supposons que l'état ressemble à ceci:

    var theState = {
      _2ndLevel: {
        count: 0
      }
    }

Nous voulons augmenter le nombre, donc nous faisons ces réducteurs

const INCR_2ND_LEVEL_COUNT = 'incr2NdLevelCount';

function _2ndlevel (state, action) {
    switch (action.type) {
        case INCR_2ND_LEVEL_COUNT:
            var newState = Objectd.assign({}, state);
            newState.count++
            return newState;
        }
    }

function topLevel (state, action) {
    switch (action.type) {
        case INCR_2ND_LEVEL_COUNT:
            return Objectd.assign({}, {_2ndLevel: _2ndlevel(state._2ndlevel)});
    }
}

Notez l'utilisation de Objectd.assign({}, ...) pour créer un tout nouvel objet dans chaque réducteur:

En supposant que Redux soit connecté à ces réducteurs, si nous utilisons le système d'événements de Redux pour déclencher un changement d'état ...

    dispatch({type: INCR_2ND_LEVEL_COUNT})

... Redux appellera:

    theNewState = topLevel(theState, action);

Remarque: action est de dispatch()

Maintenant, theNewState est un objet entièrement nouveau. 

Remarque: Vous pouvez imposer l’immuabilité avec une bibliothèque (ou les nouvelles fonctionnalités de langage ), ou tout simplement veillez à ne rien muter: D

Pour un regard plus en profondeur, je vous recommande fortement de commander cette vidéo de Dan Abramov (le créateur). Il devrait répondre à toutes vos questions.

Answer 2

Les avantages de l'immuabilité } suivants sont mentionnés dans la documentation Redux:

• Redux et React-Redux utilisent tous deux vérification d'égalité superficielle }. En particulier:
  • L'utilitaire combineReducers de Redux vérifie superficiellement les modifications de référence est causé par les réducteurs qu'il appelle.
  • La méthode de connexion de React-Redux génère des composants qui vérifient de manière superficielle les modifications de référence de l'état racine }, ainsi que les valeurs renvoyées par la fonction mapStateToProps pour voir si les composants encapsulés doivent réellement être restitués. Cette vérification superficielle nécessite l'immuabilité pour fonctionner correctement.
• La gestion des données immuables rend finalement le traitement des données plus sûr.
• Le débogage dans le temps nécessite que les réducteurs soient des fonctions pures sans effets secondaires, afin que vous puissiez passer correctement d'un état à un autre.

Answer 3

Article de Greate https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec

Avec les données immuables, les fonctions pures sont l’un des concepts clés de la programmation fonctionnelle