2016-06-20 43 views
18

Utknąłem z tym bitem i nie mogę się rozwijać - myślę, że rozwiązanie jest proste, ale nie mogę się dowiedzieć. Próbuję dodać wpis w reduktor więc dane IN będzie wyglądał to:Redux - Jak dodać wpis do tablicy w reduktorze

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

Jak dotąd jest to najbliżej mam, ale zamiast dodawać nową unikalną pozycję, jest zastąpienie jednego który jest już przechowywany. Też muszę być w stanie dodać ten przedmiot do stanu pustego gdzie entryId, entryName nie istnieje jeszcze uniknąć błędu:

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

Każdy pomysł co robię źle?

+0

Czy możesz napisać więcej kontekstu do przykładu? Na przykład, możesz wskazać _shape_ czynności, którą obsługujesz reduktor intraos? –

+0

Wysyłam coś takiego: addEntry ({entryId, entryName, uniqueEntryid}) – eloleon

+0

Spróbuj tego: [link] (https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage -2% 2Cstage-3 & code = const% 20state% 20% 3D% 20% 7B% 0D% 0A% 20% 20następna% 3A% 20% 7B% 0D% 0A% 20% 20% 20% 20nazwa% 3A% 20% 5B % 22something% 22% 2C% 20% 22something2% 22% 2C% 20% 22something3% 22% 5D% 0D% 0A% 20% 20% 7D% 0D% 0A% 7D% 3B% 0D% 0A% 0D% 0Akonst% 20nawState % 20% 3D% 20% 7B% 0D% 0A% 20% 20% 5B% 22entryId% 22% 5D% 3A% 7B% 0D% 0A% 20% 20% 20% 20% 5B% 22entryName% 22% 5D% 3A % 20% 5B ... stan% 5B% 22entryId% 22% 5D% 5B% 22entryName% 22% 5D% 2C% 22something4% 22% 5D% 0D% 0A% 20% 20% 7D% 0D% 0A% 7D% 3B % 0D% 0A% 0D% 0Aconsole.log (newState)% 3B i eksperymentalny = true i loose = false i spec = false) – jzm

Odpowiedz

22

Jeśli próbujesz dodać element do końca tablicy entryName należy robić:

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

ES6 spread z tablicami działa tak:

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] 

Sprawdź out this gist który ma przykład czegoś bardzo podobnego do tego, co robisz.

Ten zestaw przykładów bardzo mi pomógł. Wiele wspaniałych rzeczy tutaj:

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

Aktualizacja:

Jeśli entryName jest inicjowany undefined jak mówisz w swoim komentarzu, można to zrobić:

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

myślę jest to świetny przykład tego, jak bolesne może być działanie z React/redux przy użyciu silnie zagnieżdżonej struktury danych. FWIW, wiele razy zalecano mi spłaszczenie twojego stanu tak bardzo, jak to możliwe.

+0

Dzięki dannyid! Próbowałem już tego samego, a problem polega na tym, że stan początkowy jest pustym obiektem, więc ten wiersz "... state [entryId] [entryName]" spowoduje zgłoszenie błędu – eloleon

+0

Ahh, to ważna informacja! Czy możesz zaktualizować swoje pytanie, a ja zaktualizuję odpowiedź? – jaybee

+0

Będę aktualizować pytanie teraz.BTW Pracowałem wokół mojego problemu z prawie dokładnie takie samo podejście jak ty "|| []" – eloleon