A quoi servent les constantes en redux?

Par exemple de cet exemple:

export const ADD_TODO = 'ADD_TODO' export const DELETE_TODO = 'DELETE_TODO' export const EDIT_TODO = 'EDIT_TODO' export const COMPLETE_TODO = 'COMPLETE_TODO' export const COMPLETE_ALL = 'COMPLETE_ALL' export const CLEAR_COMPLETED = 'CLEAR_COMPLETED' 

Ce n’est pas comme si vous sauvegardiez des personnages. Le nom de la variable est exactement le même que la chaîne et ne changera jamais. Je comprends que faire des constantes si un jour tu faisais quelque chose comme:

 ADD_TODO = 'CREATE_TODO' 

mais cela n’arrive jamais. Alors, à quoi servent ces constantes?

Vous avez raison, il ne s’agit pas de sauvegarder des caractères, mais après la minification du code, vous pouvez économiser de l’espace.

En redux, vous utilisez ces constantes au moins à deux endroits – dans vos réducteurs et lors de la création des actions. Il est donc très pratique de définir une constante une fois dans un fichier, par exemple actionTypes.js

 export const ADD_TODO = 'ADD_TODO'; export const DELETE_TODO = 'DELETE_TODO'; export const EDIT_TODO = 'EDIT_TODO'; export const COMPLETE_TODO = 'COMPLETE_TODO'; export const COMPLETE_ALL = 'COMPLETE_ALL'; export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'; 

Et puis l’exiger dans le fichier de actions.js par exemple actions.js

 import { ADD_TODO } from './actionTypes'; export function addTodo(text) { return { type: ADD_TODO, text }; } 

Et dans un réducteur

 import { ADD_TODO } from './actionTypes'; export default (state = [], action) => { switch (action.type) { case ADD_TODO: return [ ...state, { text: action.text, completed: false } ]; default: return state } }; 

Il vous permet de trouver facilement toutes les utilisations de cette constante dans le projet (si vous utilisez un IDE). Cela vous évite également d’introduire des bugs idiots causés par des fautes de frappe – auquel cas, vous obtiendrez une ReferenceError immédiatement.

Je voudrais citer @dan_abramov , l’auteur de Redux à partir d’un commentaire sur un numéro similaire de Github.

Pourquoi est-ce bénéfique? On prétend souvent que les constantes ne sont pas nécessaires et que pour les petits projets, cela peut être correct. Pour les projets plus importants, la définition des types d’action en tant que constantes présente certains avantages:

  • Cela permet de garder la dénomination cohérente car tous les types d’actions sont regroupés à un seul endroit.

  • Parfois, vous voulez voir toutes les actions existantes avant de travailler sur une nouvelle fonctionnalité. Il se peut que l’action dont vous avez besoin ait déjà été ajoutée par quelqu’un de l’équipe, mais vous ne le saviez pas.

  • La liste des types d’action qui ont été ajoutés, supprimés et modifiés dans une requête de tirage permet à tous les membres de l’équipe de suivre la scope et l’implémentation des nouvelles fonctionnalités.

  • Si vous faites une faute de frappe lors de l’importation d’une constante d’action, vous ne serez plus défini. C’est beaucoup plus facile à remarquer qu’une faute de frappe lorsque vous vous demandez pourquoi rien ne se produit lorsque l’action est envoyée.

Voici le lien vers la question Github

Ceci est plus utile dans d’autres langages, mais aussi quelque peu utile en JavaScript. Par exemple, si j’ai utilisé "ADD_TODO" dans le code, au lieu de ADD_TODO , si je ADD_TODO une erreur en tapant l’une des chaînes, si c’était du code, if (action === 'ADD_TODOz') , quand ce code s’exécute , ça va faire la mauvaise chose. Mais si vous avez if (action === ADD_TODOz) le nom du const, if (action === ADD_TODOz) , vous obtiendrez une sorte de ReferenceError: ADD_TODOz is not defined lorsque cette ligne tente de s’exécuter – car ADD_TODOz est une référence non valide. Et, bien sûr, dans un langage statique, vous obtenez une erreur lors de la “compilation”.

Non lié au redux mais une astuce utile pour tous les développeurs qui réagissent.

Considérez cet exemple:

 render() { return ( veryBigArray.map((item) => { return ( 
  • { item.value || "Missing Value" }
  • ); }); ); }

    Question: Pourquoi devrais-je extraire la valeur manquante à une constante?

    Réponse: Javascript appelle essentiellement une new Ssortingng('Missing value') , créant ainsi un nouvel object pour chaque élément du tableau et pour chaque exécution de render() . Ceci est à la fois inutile et en fonction de la taille de la baie peut avoir un impact sur les performances