Redux - Come aggiungere una voce all'array nel riduttore

Question

Mi sono bloccato con questo bit e non posso progredire - Suppongo che la soluzione sia semplice ma non riesco a capirlo. Sto cercando di aggiungere la voce nel riduttore di modo che i dati in in apparirebbe qualcosa di questo:

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

Finora questo è il più vicino che ricevo, ma, invece di aggiungere nuova voce unica, che sostituisce quello che è già memorizzato. Inoltre ho bisogno di essere in grado di aggiungere questo articolo al stato di vuoto in cui EntryID, entryname non esiste ancora evitare errori:

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

Qualsiasi idea di cosa sto facendo male?

Answer 1

Se stai cercando di aggiungere un elemento alla fine dell'array entryName si dovrebbe fare:

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

ES6 diffusione con gli array funziona così:

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] 

Controllare fuori this gist che ha un esempio di qualcosa di molto simile a quello che stai facendo.

Ho trovato estremamente utile questa serie di esempi. Un sacco di grandi cose qui:

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

Aggiornamento:

Se entryName è inizializzato a undefined come dici nel tuo commento, si potrebbe fare questo:

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

penso questo è un grande esempio di quanto possa essere doloroso lavorare con React/redux usando una struttura di dati pesantemente annidata. FWIW, mi è stato consigliato molte volte per appiattire il tuo stato il più possibile.