Redux Reducer ändert nicht den Zustand des Ladens richtig

Question

Ich baue eine kleine Anwendung für die Annahme von Haustieren, die ein Formular zum Hinzufügen und Löschen von Haustieren aus der Adoptionsliste hat.

API

[ 
    {category: 'dog', pets: [{breed: 'chihuahua', name: 'bar' }, ....]}, 
    {category: 'cat', pets: [{breed: 'tobby', name: 'foo'}, ....]}, 
    .... 
] 

Funktion, die die Form

export default function petFieldset({ 
petGroups, addPet, deletePet, deleteCategory, 
nameInputChange, breedInputChange, categoryInputChange 
}) { 

const categoryField = Object.keys(petGroups).map((keys) => (
    <Fieldset 
     title={'Pet Category'} 
     button={<Delete onClick={deleteCategory.bind(this, { keys })} />} 
     key={keys} 
    > 
     <CategoryComponent 
      petGroup={petGroups[keys]} 
      deletePet={deletePet} 
      categoryKey={keys} 
      nameInputChange={nameInputChange} 
      breedInputChange={breedInputChange} 
      categoryInputChange={categoryInputChange} 
     /> 
     <br /> 
     <AddPet onClick={addPet.bind(this, { keys })} /> 
    </Fieldset> 
)); 

return (<div>{ categoryField }</div>); 
} 

Mein Minderer addPet sieht aus wie dieses

[ADD_PET]: (state, { payload }) => { 
    state[payload.keys].pets.push({ breed: '', name '' }); 
    return { ...state }; 
}, 

Die AddPet Komponente erstellt ist ein Knopf, der die Aktion auslöst ADD_PET das schafft ein neues Formularfeld mit den Eingängen name und breed am unteren Rand des Formulars. Dies geschieht, indem ein leerer { breed: '', name: '' } auf das Tier-Array für die ausgewählte Kategorie gedrückt wird.

Das Problem ist, wenn ich versuche, ein Haustier mehr als einmal hinzufügen. Wenn ein Haustier das erste Mal hinzugefügt wird, erstellt es ein leeres Formular mit den breed und name mit leeren Feldern. Wenn jetzt neue Tiere hinzugefügt werden, enthält das Formular die gleichen name und breed Felder des zuvor hinzugefügten Felds.

Beispiel des unerwünschten Verhalten:

1) Form mit den Daten von der API als Platzhalter geladen wird. [erwartet]

2) Benutzer klickt auf AddPet Schaltfläche, die ein neues leeres Formular mit name und breed ohne Platzhalter erstellt. [erwartet]

3) Benutzer schreibt den Kosenamen und Rasse auf das neu erstellte Formular und klickt auf die Komponente AddPet. [erwartet]

4) ein neues Formular mit demselben name und breed wie in Schritt 3). [unerwartet]

Etwas passiert mit dem state[payload.keys].faqs.push({ breed: '', name '' }) vom Reducer.

Answer 1

Push ist keine unveränderliche Operation. Sie ändern das Array selbst. Es hat also den gleichen Zustand und vorherigen Zustand.

Sie müssen eine Kopie des vorherigen Arrays erstellen und in diese neue Kopie das neue Element kopieren.

Zum Beispiel:

[ADD_PET]: (state, { payload }) => { 
    let pets = [...state[payload.keys].pets]; 
    pets.push({ breed: '', name '' }); 
    return { ...state, payload.keys: pets }; 
},