React-Redux: Tüm bileşen durumları Redux Mağazasında tutulmalı mı

Basit bir geçişim olduğunu varsayalım:

Düğmeye tıkladığımda, Renk bileşeni kırmızı ve mavi arasında değişiyor

Böyle bir şey yaparak bu sonuca ulaşabilirim.

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

redüktör.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

ama bu jQuery, bazı sınıflar ve bazı css ile 5 saniyede elde edebileceğim bir şey için yazmak için çok fazla kod.

Sanırım gerçekten sorduğum şey, burada neyi yanlış yapıyorum?

Redux, öncelikle "uygulama durumu" için tasarlanmıştır. Yani, uygulama mantığınızla ilgili her şey. Bunun üzerine inşa edilen görüş, bu durumun bir yansımasıdır, ancak yaptığı her şey için bu durum kapsayıcısını özel olarak kullanmak zorunda değildir.

Sadece şu soruları sorun: Bu durum başvurunun geri kalanı için önemli mi? Uygulamanın diğer bölümleri bu duruma göre farklı davranacak mı? Pek çok küçük durumda durum böyle olmayacaktır. Bir açılır menüyü seçin: Açık veya kapalı olması, muhtemelen uygulamanın diğer bölümlerini etkilemeyecektir. Yani, onu mağazanıza kablolamak muhtemelen aşırıdır. Kesinlikle geçerli bir seçenektir, ancak size herhangi bir fayda sağlamaz. this.stateKullanıp bir gün demsen daha iyi .

Sizin örneğinizde, uygulamanın diğer bölümlerinde herhangi bir fark yaratmak için bu düğmenin rengi değiştiriliyor mu? Uygulamanızın büyük bir kısmı için bir tür küresel açma / kapama geçişiyse, kesinlikle mağazaya aittir. Ancak düğmeyi tıkladığınızda yalnızca bir düğme rengini değiştiriyorsanız, renk durumunu yerel olarak tanımlanmış olarak bırakabilirsiniz. Düğmeye tıklama eyleminin, bir eylem gönderimi gerektiren başka etkileri olabilir, ancak bu, hangi renk olması gerektiği sorusundan ayrıdır.

Genel olarak, başvurunuzun durumunu olabildiğince küçük tutmaya çalışın. Orada her şeyi itmek zorunda değilsin . Yapmanız gerektiğinde yapın yoksa bir şeyi orada tutmak çok mantıklıdır. Veya Geliştirme Araçlarını kullanırken hayatınızı kolaylaştırırsa. Ancak önemini çok fazla yüklemeyin.

Redux SSS: Organizing State
redux official doc'un bu bölümü sorunuzu iyi cevapladı.

Yerel bileşen durumunu kullanmak iyidir . Bir geliştirici olarak, başvurunuzu ne tür bir devletin oluşturduğunu ve her bir devlet parçasının nerede yaşaması gerektiğini belirlemek sizin işinizdir. Size uygun bir denge bulun ve onunla devam edin.

Redux'a ne tür verilerin konulması gerektiğini belirlemek için bazı genel kurallar:

• Uygulamanın diğer bölümleri bu verilerle ilgileniyor mu?
• Bu orijinal verilere dayanarak daha fazla türetilmiş veri oluşturabilmeniz gerekiyor mu?
• Birden çok bileşeni sürmek için aynı veriler mi kullanılıyor?
• Bu durumu belirli bir zaman noktasına geri yükleyebilmenin sizin için bir değeri var mı (yani, zaman yolculuğu hata ayıklaması)?
• Verileri önbelleğe almak istiyor musunuz (yani, yeniden istemek yerine zaten oradaysa, durumda olanı kullanın)?

@ AR7 tarafından sağlanan harika bağlantıyı vurgulamak amacıyla ve bu bağlantı bir süre geri taşındığı için:

Küresel olarak uygulama için önemli olmayan ve karmaşık şekillerde değişmeyen geçici durum için React'i kullanın. Örneğin, bazı UI öğelerinde bir geçiş, bir form giriş durumu. Redux'u küresel olarak önemli olan veya karmaşık şekillerde değişime uğrayan durumlar için kullanın. Örneğin, önbelleğe alınmış kullanıcılar veya bir gönderi taslağı.

Bazen Redux durumundan React durumuna geçmek isteyebilirsiniz (Redux'da bir şeyi saklamak garipleştiğinde) veya tam tersi (daha önce yerel olan bir duruma daha fazla bileşenin erişime sahip olması gerektiğinde).

Temel kural şudur: daha az garip olanı yapın.

Dan Abramov: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

Evet, tüm bileşen durumlarını Redux'da depolamaya değer . Bunu yaparsanız, Redux'un zaman yolculuğu hata ayıklama ve tekrar oynatılabilir hata raporları gibi birçok özelliğinden yararlanacaksınız. Aksi takdirde, bu özellikler tamamen kullanılamaz hale gelebilir .

Her zaman sen yok değişim Redux yığın değiştirir tamamen kaybolur ve uygulama UI mağaza ile senkronizasyon dışı olacağını, Redux bir bileşen durum değişikliği saklayın. Bu sizin için önemli değilse, neden Redux kullanıyorsunuz? Onsuz başvurunuz daha az karmaşık olacaktır!

Performans nedenleriyle, this.setState()birçok eylemi tekrar tekrar gönderebilecek herhangi bir şey için geri dönmek isteyebilirsiniz . Örneğin: kullanıcı bir anahtarı her yazdığında bir girdi alanının durumunu Redux'te depolamak performansın düşmesine neden olabilir. Bunu bir işlem gibi ele alarak çözebilirsiniz: kullanıcı eylemi "tamamlandığında", son durumu Redux'a kaydedin.

Orijinal gönderiniz, Redux yönteminin nasıl "yazılacak çok fazla kod" olduğundan bahsediyor. Evet, ancak yerel bileşen durumu gibi yaygın modeller için soyutlamalar kullanabilirsiniz.