web-dev-qa-db-fra.com

Redux n'est-il pas simplement un État mondial glorifié?

J'ai donc commencé à apprendre React il y a une semaine et j'ai inévitablement eu un problème d'état et comment les composants sont censés communiquer avec le reste de l'application. J'ai cherché et Redux semble être la saveur du mois. J'ai lu toute la documentation et je pense que c'est en fait une idée assez révolutionnaire. Voici mes réflexions à ce sujet:

L'état est généralement reconnu comme étant assez mauvais et une grande source de bugs dans la programmation. Au lieu de tout disperser dans votre application, Redux explique pourquoi ne pas tout concentrer dans une arborescence d'état globale que vous devez émettre des actions pour changer? Ça a l'air intéressant. Tous les programmes ont besoin d'un état, alors collons-le dans un espace impur et ne le modifions que de l'intérieur pour que les bogues soient faciles à localiser. Ensuite, nous pouvons également lier de manière déclarative des éléments d'état individuels aux composants React et les redessiner automatiquement et tout est beau.

Cependant, j'ai deux questions sur cette conception entière. D'une part, pourquoi l'arbre d'état doit-il être immuable? Disons que je ne me soucie pas du débogage du voyage dans le temps, du rechargement à chaud et que j'ai déjà implémenté annuler/rétablir dans mon application. Cela semble tellement lourd de devoir faire ça:

case COMPLETE_TODO:
  return [
    ...state.slice(0, action.index),
    Object.assign({}, state[action.index], {
      completed: true
    }),
    ...state.slice(action.index + 1)
  ];

Au lieu de cela:

case COMPLETE_TODO:
  state[action.index].completed = true;

Sans oublier que je crée un tableau blanc en ligne juste pour apprendre et chaque changement d'état peut être aussi simple que d'ajouter un coup de pinceau à la liste de commandes. Après un certain temps (des centaines de coups de pinceau), la duplication de l'ensemble de la matrice pourrait devenir extrêmement coûteuse et longue.

Je suis d'accord avec un arbre d'état global indépendant de l'interface utilisateur qui est muté via des actions, mais doit-il vraiment être immuable? Quel est le problème avec une implémentation simple comme celle-ci (ébauche très approximative. Écrite en 1 minute)?

var store = { items: [] };

export function getState() {
  return store;
}

export function addTodo(text) {
  store.items.Push({ "text": text, "completed", false});
}

export function completeTodo(index) {
  store.items[index].completed = true;
}

C'est toujours un arbre d'état global muté via des actions émises mais extrêmement simple et efficace.

javascriptreactjsstateimmutabilityredux
73
Ryan Peschel

Redux n'est-il pas simplement un État mondial glorifié?

Bien sûr que oui. Mais il en va de même pour chaque base de données que vous avez déjà utilisée. Il est préférable de traiter Redux comme une base de données en mémoire - dont vos composants peuvent dépendre de manière réactive.

L'immutabilité permet de vérifier si un sous-arbre a été modifié de manière très efficace car il simplifie le contrôle d'identité.

Oui, votre implémentation est efficace, mais l'ensemble du dom virtuel devra être restitué à chaque fois que l'arborescence est manipulée d'une manière ou d'une autre.

Si vous utilisez React, il finira par faire une différence avec le dom réel et effectuera un minimum de manipulations optimisées par lots, mais le re-rendu complet de haut en bas est toujours inefficace.

Pour un arbre immuable, les composants sans état doivent simplement vérifier si le ou les sous-arbres dont ils dépendent, diffèrent en identités par rapport aux valeurs précédentes, et si c'est le cas - le rendu peut être entièrement évité.

44
lorefnon