Dynamisch festgelegte Formularfeldwerte in React + Redux

Question

Der Store meiner App hat einen store.authState Teilbaum. In diesem Unterbaum gibt es drei Dinge, ein authToken, ein isFetching Boolesches und am wichtigsten ein fields Objekt. Mein Formular enthält zwei Felder: username und password.

Ich habe eine Aktion namens SET_FORM_FIELD_VALUE erstellt, die den Status jedes Felds generieren und aktualisieren soll, wenn sie vom Benutzer geändert werden.

Ich möchte meine SET_FORM_FIELD_VALUE das fields Objekt aktualisieren. Wenn ein Benutzer beide füllt normalerweise in username und password Feldern, meine store.authState soll wie folgt aussehen:

{ 
    authToken: undefined, 
    isFetching: false, 
    fields: { 
     username: "Brachamul", 
     password: "azerty123" 
    } 
} 

Es scheint jedoch, dass mein aktueller Code tatsächlich alles nur überschreibt und ich am Ende mit:

{ 
    field: { 
     username: "Brachamul" 
    } 
} 

Die Daten im Feld ändern sich je nachdem, welches Feld ich zuletzt bearbeitet habe. Es ist entweder Benutzername oder Passwort.

Hier ist mein Code:

switch (action.type) { 
    case 'SET_FORM_FIELD_VALUE': 
     let field = {} // create a "field" object that will represent the current field 
     field[action.fieldName] = action.fieldValue // give it the name and value of the current field 
     return { ...state.fields, field } 

Wie kann ich es mein Problem zu beheben ändern?

Answer 1

Ihre Rückkehr falsch ist, sollte es so etwas wie diese

switch (action.type) { 
    case 'SET_FORM_FIELD_VALUE': 
      return { 
        ...state, 
        fields: { 
         ...state.fields, 
         [action.fieldName] : action.fieldValue 
        } 
      } 
} 

sein, es hilft.