Was ist der Punkt der Konstanten in redux?

Question

Zum Beispiel aus diesem Beispiel:

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' 

Es ist nicht wie Sie Zeichen sind zu speichern. Der Variablenname ist genau derselbe wie der String und wird sich niemals ändern. Ich verstehe machen Konstanten wenn Sie eines Tages taten wie etwas zu tun:

ADD_TODO = 'CREATE_TODO' 

aber das kommt nie. Zu welchem ​​Zweck dienen diese Konstanten?

Answer 1

Sie haben Recht, es geht nicht darum, Zeichen zu speichern, aber nach der Code-Minification können Sie etwas Speicherplatz sparen.

In redux verwenden Sie diese Konstanten mindestens an zwei Stellen - in Ihren Reduzierungen und bei der Erstellung von Aktionen. Es ist also sehr praktisch, eine Konstante einmal in einer Datei zu definieren, z. 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'; 

Und dann benötigen sie in Aktionen Schöpfer Datei z.B. actions.js

import { ADD_TODO } from './actionTypes'; 

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

und in einigen Minderer

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

Es Sie über das Projekt alle Verwendungen dieser konstant leicht finden (wenn Sie eine IDE verwenden). Es verhindert auch, dass Sie dumme Fehler durch Tippfehler einführen - in diesem Fall erhalten Sie sofort eine ReferenceError.

Answer 2

Ich möchte @dan_abramov zitieren, der Autor von Redux von einem Kommentar zu ähnlichen Github Problem.

Warum ist das vorteilhaft? Es wird oft behauptet, dass Konstanten unnötig sind, und für kleine Projekte könnte dies korrekt sein. Für größere Projekte gibt es einige Vorteile Aktionstypen als Konstanten zu definieren:

• Es die Namensgebung konsequent hilft, weil alle Aktionstypen in einem einzigen Ort gesammelt werden.

• Manchmal möchten Sie alle vorhandenen Aktionen sehen, bevor Sie an einer neuen Funktion arbeiten. Es kann sein, dass die Aktion, die Sie benötigen, bereits von jemandem im Team hinzugefügt wurde, aber Sie wussten es nicht.

• Die Liste der Aktionstypen, die in einer Pull-Anforderung hinzugefügt, entfernt und geändert wurden, hilft jedem im Team, den Umfang und die Implementierung neuer Funktionen zu verfolgen.

• Wenn Sie beim Importieren einer Aktionskonstante einen Tippfehler machen, werden Sie undefiniert. Das ist viel leichter zu bemerken als ein Tippfehler, wenn Sie sich fragen, warum nichts passiert, wenn die Aktion ausgelöst wird.

Hier ist der Link zum Github issue

Answer 3

Dieses nützlichen in anderen Sprachen, aber auch etwas nützlich in JavaScript.Zum Beispiel, wenn ich "ADD_TODO" im gesamten Code anstelle von ADD_TODO, dann, wenn ich einen Fehler bei der Eingabe einer der Zeichenfolgen verwendet, wenn es Code wie if (action === 'ADD_TODOz') war, wenn dieser Code ausgeführt wird, wird es die falsche Sache tun. Aber wenn Sie den Namen der const, if (action === ADD_TODOz), vertippt haben, erhalten Sie eine Art von ReferenceError: ADD_TODOz is not defined, wenn diese Zeile versucht auszuführen - weil ADD_TODOz ist eine ungültige Referenz. Und natürlich erhalten Sie in einer statischen Sprache einen Fehler bei der "Kompilierzeit".

Answer 4

Nicht mit redux verwandt, aber ein nützlicher Tipp für alle reagierenden Entwickler.

dieses Beispiel vor:

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

Frage: Warum sollte ich 'Fehlender Wert' auf einen konstanten extrahieren?

Antwort: Javascript im Grunde rufen new String('Missing value') somit für jedes Element in dem Array ein neues Objekt zu erstellen und für jede render() Ausführung. Dies ist sowohl unnötig und abhängig von der Array-Größe kann die Leistung beeinträchtigen