Redux - Wie man einen Eintrag in Array in Reducer

Question

Ich steckte mit diesem Bit und ich kann nicht Fortschritte - ich denke Lösung ist einfach, aber ich kann nicht herausfinden. Ich versuche Eintrag in Minderer hinzuzufügen, so dass Daten in in diesen etwas aussehen würde:

state = { 
    entryId: { 
    entryName: ["something", "something2", "something3" /* and so on... */] 
    } 
}; 

Bisher ist dies die nächste, die ich bekommen, aber anstatt das Hinzufügen von neuen eindeutigen Eintrag, es ersetzt die das ist schon gespeichert. Auch muss ich diesen Artikel zu leeren Zustand in der Lage sein hinzuzufügen, wo entryId, Eintragsname noch nicht existiert Fehler zu vermeiden:

switch(type) { 
    case ADD_ENTRY: 
    return { 
     ...state, 
     [entryId]: { 
     ...state[entryId], 
     [entryName]: { 
      [uniqueEntry]: true 
     } 
     } 
    }; 
} 

Jede Idee, was ich falsch mache?

Answer 1

Wenn Sie versuchen, ein Element an das Ende des entryName Array hinzufügen Sie tun sollten:

return { 
    ...state, 
    [entryId]: { 
    ...state[entryId], 
    [entryName]: [ 
     ...state[entryId][entryName], 
     uniqueEntry 
    ] 
    } 
}; 

ES6 Aufstrich mit Arrays funktioniert wie folgt:

const array1 = [1, 2, 3]; 
const array2 = [4, 5, 6]; 
const eight = 8; 

const newArray = ['stuff', ...array1, 'things', ...array2, ...[7, eight], 9]; 
console.log(newArray); // ["stuff", 1, 2, 3, "things", 4, 5, 6, 7, 8, 9] 

prüfen out this gist, die ein Beispiel für etwas hat, das dem, was Sie tun, sehr ähnlich ist.

Ich fand diese Beispiele auch sehr hilfreich. Viele tolle Sachen hier:

https://github.com/sebmarkbage/ecmascript-rest-spread

Update:

Wenn entryName-undefined initialisiert wird, wie Sie in Ihrem Kommentar sagen, könnten Sie dies tun:

return { 
    ...state, 
    [entryId]: { 
    ...state[entryId], 
    [entryName]: [ 
     ...state[entryId][entryName] || [], 
     uniqueEntry 
    ] 
    } 
}; 

Ich denke, Dies ist ein ziemlich gutes Beispiel dafür, wie schmerzhaft es sein kann, mit React/Redux unter Verwendung einer stark verschachtelten Datenstruktur zu arbeiten. FWIW, mir wurde oft empfohlen, deinen Staat so weit wie möglich zu verflachen.