kompleks (derin) devlet

Question

nesneleri benim ilk redux durumu düşünüldüğünde ise:

state.roomList[n].expanded = !state.roomList[n].expanded 

Bir Redux kullanarak yeni am:

const state = { 
    currentView: 'ROOMS_VIEW', 
    navbarLinks: List([ 
    {name: 'Rooms', key: 'ROOMS_VIEW'}, 
    {name: 'Dev', key: ''} 
    ]), 
    roomListsSelected: {group: 0, item: 0}, 
    roomLists: [ 
    { 
     name: "Filters", 
     expanded: true, 
     listItems: [ 
     { icon: 'images/icon-warning.svg', name: 'Alerts', filter: room => room.hasAlert }, 
     { icon: 'images/icon-playlist.svg', name: 'In Progress', filter: room => room.progress > 20 }, 
     { icon: 'images/icon-playlist.svg', name: 'Almost Done', filter: room => room.progress > 90 }, 
     { icon: 'images/icon-playlist.svg', name: 'Complete', filter: room => room.status === 'complete' }, 
     { icon: 'images/icon-playlist.svg', name: 'Recently Completed', filter: room => false }, 
     { icon: 'images/icon-playlist.svg', name: 'All Rooms', filter: room => true } 
     ] 
    } 
    ], 
    rooms: List(generateRooms()) 
} 

Bunu yapan bir redüktör yapmak gerekir iş akışı ve bunu çözmenin en iyi yolu, immutable.js nesnesinin roomList olmasını veya durum nesnesinin derin bir klonunu oluşturmak için bir kod yazmasını sağlamaktır.

Ayrıca state.roomList, gelecekteki özelliklerden yeni verilere sahip olacak.

Summery/Soru: Reddet durum nesnesinin yapısını değiştirdiğimde, durum değiştiricisinde yeni bir durum nesnesini redükleyicide döndürmenin en iyi yolu nedir?

Ne yaptım Sonunda gidilemeyen bir yol gibi görünüyor. Tepki oluşturma süresini azaltmak için Immutable ile bazı hileler vardır ve tüm proje gereksinimlerini karşılar. Ayrıca projede büyük değişiklikler yapmadan yeni bir kütüphane kullanmak için yeterince erken.

Answer 1

İlk olarak, deyimsel Redux, eyaletinizi “normalleştirmeye” ve mümkün olduğunca düzleştirmeye teşvik eder. Öğelerin doğrudan aramalarına izin vermek için öğe kimlikleriyle anahtarlanan nesneleri kullanın, siparişi göstermek için kimlik dizilerini kullanın ve bir öğenin diğerine başvurması gereken her yerde, yalnızca gerçek öğenin yerine diğer öğenin kimliğini depolar. Bu, iç içe geçmiş nesnelerin daha basit aramalarını ve güncelleştirmelerini yapmanızı sağlar. Bakınız the Redux FAQ question on nested data.

Ayrıca, şu anda doğrudan bir dizi işlevi doğrudan Redux durumunda sakladığınız anlaşılıyor. Teknik olarak çalışan, ancak kesinlikle deyimsel değil ve zaman yolculuğu hata ayıklama gibi özellikleri kırıyor, bu yüzden büyük ölçüde cesaret kırıldı. Redux SSS, why storing non-serializable values in your Redux state is a bad idea hakkında daha fazla bilgi verir.

düzenleme: Bir takibi olarak

, Geçenlerde "Structuring Reducers" konusuyla ilgili, Redux dokümanlar için yeni bir bölümü eklendi.Özellikle, bu bölüm "Normalizing State Shape" ve "Updating Normalized Data" ile "Immutable Update Patterns" numaralı bölümleri içerir.

Answer 2

Redüktör bileşimi: Redüktörlerinizi daha küçük parçalara ayırın, böylece bir redüktör basit veri yapısıyla başa çıkacak kadar küçüktür. Örneğin. Senin durumunda: roomListReducerlistItemsReducerlistItemReducer. Daha sonra, her redüktörde, uğraştığınız devletin hangi bölümünü okumanız çok daha kolay olacaktır. Çok yardımcı olur, çünkü redüktörünüzün her biri küçük bir veri parçasıyla uğraşır, çünkü 'derin kopyalama veya sığ kopyalama' gibi şeyler için endişelenmenize gerek yoktur.

Ben düz nesnelere uğraşmayı tercih çünkü Immutable Ben şahsen immutable.js kullanmayın. ve yeni bir API'yi benimsemek için değiştirmek için çok fazla kod var. Ama fikir şu ki, devlet değişikliklerinin her zaman saf işlevlerle yapıldığından emin ol. Bu nedenle, istediğiniz şeyi yapmak için kendi yardımcı işlevlerinizi yazabilirsiniz, karmaşık nesnelerle uğraşırken tamamen test edildiğinden emin olun.

Ya da yalnızca, her redüktörünüzde durumunuzu her zaman derinlemesine kopyalayabilir ve kopyaya girip kopyayı geri döndürebilirsiniz. Ama bu açıkçası en iyi yol değil.