Redux - Definiere neuen Status in Reducer Switch-Anweisung mit neuer Variable jedes Mal?

Question

Mein Minderer sieht wie folgt aus:

switch (action.type) { 
     case "UPDATE_CURRENT_USER": 
     let newState = {...state, ...action.payload }; 
     return newState; 
     case "GET_CURRENT_USER": 
     return state; 
     case "UPDATE_USERNAME": 
     newState = {...state, name: action.payload.name}; 
     return state; 
    } 

nun das zweite Mal, dass ich newState ich definieren, es werde nicht wieder verwende. Ich verwende einfach die Variable, die ich oben definiert habe. Ist das ok? Ich wollte es neu definieren, bekam aber einen Fehler. Aber ich bin mir nicht sicher, ob dieser Weg mir immer noch das richtige Ergebnis geben wird - obwohl alles in Ordnung zu sein scheint?

Answer 1

Verwenden geschweiften Klammern {} neuen Block Bereich erstellen innerhalb der Case-Anweisung:

switch (action.type) { 
    case "UPDATE_CURRENT_USER": { 
    let newState = {...state, ...action.payload }; 
    return newState; 
    } 
    case "GET_CURRENT_USER": 
    return state; 
    case "UPDATE_USERNAME": { 
    let newState = {...state, name: action.payload.name}; 
    return newState; 
    } 
} 

Da let und const sind Block lokale Variablen scoped, sie nur im aktuellen Block sichtbar sind.

ich Ihren Code, den Sie verwenden nicht angemeldete newState Variable:

switch (action.type) { 
    case "UPDATE_CURRENT_USER": 
    // (conditionaly) declaring block scoped variable newState 
    let newState = {...state, ...action.payload }; 
    return newState; 
    case "UPDATE_USERNAME": 
    // here you cannot declare newState variable because it might be declared before 
    // however the variable is not declared since we are in other case 
    // so that here you are using global window variable window.newState 
    newState = {...state, name: action.payload.name}; 
    return state; 
} 

Answer 2

Sie brauchen nicht eine Variable für neuen Staat zu schaffen, einen Wert zuweisen und sie zurückbringen. Stattdessen können Sie den neuen Statuswert sofort zurückgeben. Und vergessen Sie nicht, am Ende einen Standardfall hinzuzufügen.

switch (action.type) { 
     case 'UPDATE_CURRENT_USER': 
      return { ...state, ...action.payload }; 
     case 'GET_CURRENT_USER': 
      return state; 
     case 'UPDATE_USERNAME': 
      return { ...state, name: action.payload.name }; 
     default: 
      return state; 
     }