Jak zaktualizować wartość zagnieżdżonego obiektu w reduktorze?

Question

zbudowałem mój stan jak tak

const list = { 
    categories: { 
    Professional: { 
    active: false, 
    names: [ 
     { 
     id: 1, 
     name: "Golf", 
     active: false 
     }, 
     { 
     id: 2, 
     name: "Ultimate Frisbee", 
     active: false 
     } 
    ] 
}} 

W moim działaniu Dodałem opcję ID więc chciałbym, aby zmienić status aktywnego, gdy użytkownik kliknie opcję, aby zrobić

używam Niezmienna JS, chociaż nie jest z nią związana. Zastanawiam się, w jaki sposób mogę skierować identyfikator obiektu i zaktualizować jego status aktywny w reduktorze? Jestem również otwarty na informacje zwrotne dotyczące tego, w jaki sposób lepiej poprawić mój stan.

Answer 1

To bardzo powszechna rzecz, a właściwie dość zniechęcająca. O ile mi wiadomo, nie ma naprawdę dobrego i dobrze przyjętego rozwiązania w prostym JS. Początkowo Object.assign podejście użyto:

return Object.assign({}, state, { 
    categories: Object.assign({}, state.categories, { 
    Professional: Object.assign({}, state.Professional, { 
     active: true 
    }) 
    }) 
}); 

To jest zbyt proste i uciążliwe, przyznaję, ale muszę powiedzieć, że stworzyliśmy kilka dużych aplikacji z tego podejścia, a oprócz liczby znaków jest nie jest zły. Obecnie najpopularniejszym sposobem jest za pomocą Object spread:

return { 
    ...state, 
    categories: { 
    ...state.categories, 
    Professional: { 
     ...state.categories.Professional, 
     active: true 
    } 
    } 
} 

Drugie podejście jest znacznie czystsze, więc jeśli używać zwykłego JS, to wydaje się dobrym wyborem. W Immutable.js muszę przyznać, że jest łatwiej, wystarczy zrobić następny

return state.updateIn(['categories', 'Professional'], x => x.set('active', true)); 

Ale ma to swoje wady i zastrzeżenia, więc lepiej jest myśleć o tym poważnie przed podjęciem niego.

I twoje ostatnie pytanie dotyczące poprawy stanu - zwykle lepiej nie mieć tak głębokiego zagnieżdżenia (oddzielić obawy, bardzo często pola nie zależą od siebie nawzajem - jak status active można oddzielić na inny obiekt), ale trudno powiedzieć z powodu braku wiedzy o twojej domenie. Ponadto dane są uważane za normalne.

Answer 2

W sekcji Docs Redux na Structuring Reducers obejmuje to. W szczególności zobacz sekcję o Immutable Update Patterns. Podane przykłady dotyczą zwykłych obiektów i tablic JS, ale ta sama zasada obowiązuje - map() na liście, zwróć istniejący element na wszystko, co chcesz , a nie, które chcesz zaktualizować, i zwróć nową wersję dla tej, którą do chcesz zaktualizować.

Co do dokumentów, należy również pamiętać, że łatwiej jest zaktualizować określony element, jeśli dane są przechowywane w znormalizowanej strukturze, ponieważ można je wyszukać bezpośrednio za pomocą identyfikatora. Sekcja "Redukcje strukturalne" obejmuje również normalizację.