Qual è il punto delle costanti in redux?

Question

Ad esempio da questo esempio:

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' 

non è come si sta salvando caratteri. Il nome della variabile è esattamente uguale alla stringa e non cambierà mai. Capisco di fare costanti se un giorno stavi facendo qualcosa del tipo:

ADD_TODO = 'CREATE_TODO' 

ma questo non succede mai. Quindi, quale scopo servono queste costanti?

Answer 1

Hai ragione, non si tratta di salvare i caratteri, ma dopo la modifica del codice è possibile risparmiare spazio.

In redux si usano queste costanti almeno in due punti: nei riduttori e durante la creazione di azioni. Quindi è molto conveniente definire una costante una volta in alcuni file, ad es. 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'; 

E poi richiedono in azioni di file creatore esempio actions.js

import { ADD_TODO } from './actionTypes'; 

export function addTodo(text) { 
    return { type: ADD_TODO, text }; 
} 

e in alcuni riduttore

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 
    } 
}; 

Esso consente di trovare facilmente tutti gli usi di quel costante attraverso il progetto (se si utilizza un IDE). Ti impedisce anche di introdurre bug insensati causati da errori di battitura - nel qual caso, riceverai immediatamente un ReferenceError.

Answer 2

Vorrei citare @dan_abramov, l'autore di Redux da un commento su un problema simile a Github.

Perché è utile? Spesso si afferma che le costanti non sono necessarie, e per i piccoli progetti, questo potrebbe essere corretto. Per i progetti più grandi, ci sono alcuni vantaggi per la definizione di tipi di azione come costanti:

• Aiuta a mantenere la coerenza dei nomi perché tutti i tipi di azione sono riuniti in un unico luogo.

• A volte si desidera vedere tutte le azioni esistenti prima di lavorare su una nuova funzione. Può darsi che l'azione di cui hai bisogno sia già stata aggiunta da qualcuno nel team, ma non lo sapevi.

• L'elenco dei tipi di azione che sono stati aggiunti, rimossi e modificati in una richiesta di pull consente a tutti i membri del team di tenere traccia dell'ambito e dell'implementazione delle nuove funzionalità.

• Se si commette un errore di battitura durante l'importazione di una costante di azione, si otterrà un valore non definito. Questo è molto più facile da notare rispetto a un errore di battitura quando ti chiedi perché non accade nulla quando l'azione viene inviata.

Ecco il link al Github issue

Answer 3

Questo è più utile in altre lingue, ma anche un po 'utile in JavaScript.Ad esempio, se ho usato "ADD_TODO" per tutto il codice, invece di ADD_TODO, quindi se commetto un errore digitando una delle stringhe, se fosse un codice tipo, if (action === 'ADD_TODOz'), quando viene eseguito quel codice, farà la cosa sbagliata. Ma se hai digitato in modo errato il nome di const, if (action === ADD_TODOz), avrai una sorta di ReferenceError: ADD_TODOz is not defined quando quella linea tenta di eseguire - perché ADD_TODOz è un riferimento non valido. E, naturalmente, in un linguaggio statico, riceverai un errore in "tempo di compilazione".

Answer 4

Non correlato al redux ma un suggerimento utile per tutti gli sviluppatori che reagiscono.

Considerate questo esempio:

render() { 
    return (
     veryBigArray.map((item) => { 
      return (
       <li key={ index }> 
        { item.value || "Missing Value" } 
       </li> 
      ); 
     }); 
    ); 
} 

Domanda: Perché dovrei estrarre 'il valore mancante' ad una costante?

Risposta: JavaScript è fondamentalmente chiamando new String('Missing value') creando così un nuovo oggetto per ogni elemento dell'array e per ogni render() esecuzione. Questo non è necessario e, a seconda delle dimensioni dell'array, può influire sulle prestazioni