Kısa bir süre önce Redux'u keşfettim . Her şey iyi görünüyor. Redux'u Flux üzerinde kullanmanın olumsuz, olumsuz yanları veya tavizleri var mı? Teşekkürler

Redux yazarı burada!

Bunu kullanarak aşağıdaki tavizleri yapacağınızı söylemek isterim:

• Mutasyonlardan kaçınmayı öğrenmeniz gerekir. Flux, verilerin mutasyona uğraması konusunda açık değildir, ancak Redux mutasyonları sevmez ve Redux'u tamamlayıcı birçok paket, durumu asla değiştirmediğinizi varsayar. Bunu redux-immutable-state-invariant gibi yalnızca devasa paketlerle uygulayabilir , Immutable.js'yi kullanabilir veya mutasyona neden olmayan kod yazmak için kendinize ve ekibinize güvenebilirsiniz, ancak bu bilmeniz gereken bir şeydir ve bunun ekibinizin kabul ettiği bilinçli bir karar olun.

• Paketlerinizi dikkatlice seçmeniz gerekecek. Flux, geri alma / yineleme , kalıcılık veya formlar gibi “yakındaki” sorunları açıkça çözmeye çalışmasa da , Redux'un ara katman yazılımı ve mağaza geliştiricileri gibi uzantı noktaları vardır ve genç ama zengin bir ekosistem ortaya çıkarmıştır . Bu, çoğu paketin yeni fikirler olduğu ve henüz kritik kullanım kitlesini almadığı anlamına gelir. Birkaç ay sonra açıkça kötü bir fikir olacak bir şeye güvenebilirsiniz, ancak henüz söylemek zor.

• Henüz güzel bir Flow entegrasyonunuz olmayacak. Flux şu anda Redux'un henüz desteklemediği çok etkileyici statik tip kontrolleri yapmanıza izin veriyor . Oraya gideceğiz, ama biraz zaman alacak.

Birincisi yeni başlayanlar için en büyük engel, ikincisi aşırı hevesli erken evlat edinenler için bir sorun olabilir ve üçüncüsü benim kişisel evcil hayvanım. Bunun dışında, Redux kullanmanın Flux'un kaçındığı belirli bir dezavantaj getirdiğini düşünmüyorum ve bazı insanlar Flux'a kıyasla bazı artışlar olduğunu söylüyor.

Ayrıca Redux kullanmanın yanlarındaki cevabımı da görün .

Hem Redux hem de Flux, birçok ortak paterni, özellikle de eşzamansız veri getirmeyi içerenleri kaplamak için önemli miktarda kazan plakası kodu gerektirir. Redux belgelerinde, kazan plakasını azaltmak için zaten birkaç örnek bulunmaktadır: http://redux.js.org/docs/recipes/ReducingBoilerplate.html . İhtiyacınız olan her şeyi Alt veya Fluxxor gibi bir Flux kütüphanesinden alabilirsiniz, ancak Redux özellikler üzerinde özgürlüğü tercih eder. Bu, bazı geliştiriciler için bir dezavantaj olabilir, çünkü Redux, durumunuz hakkında yanlışlıkla göz ardı edilebilecek bazı varsayımlar yapar.

Sorunuza gerçekten cevap vermenin tek yolu, belki de kişisel bir projede yapabiliyorsanız Redux'u denemektir. Redux, daha iyi bir geliştirici deneyimine ihtiyaç duyduğu için ortaya çıktı ve fonksiyonel programlamaya yöneldi. Redüktörler ve fonksiyon kompozisyonu gibi fonksiyonel kavramlara aşina değilseniz, yavaşlayabilirsiniz, ancak sadece biraz. Bu fikirleri veri akışında kucaklamanın üst tarafı daha kolay test ve öngörülebilirliktir.

Feragatname: Flummox'tan (popüler bir Flux uygulaması) Redux'a geçtim ve inişler olumsuzluklardan çok daha ağır bastı. Kodumda çok daha az sihir tercih ederim. Daha az büyü, biraz daha fazla kazanın bir maliyetiyle gelir, ancak ödemek için çok küçük bir fiyattır.

Akı ve Redux . . .

Redux saf bir Flux uygulaması değil, kesinlikle Flux'tan esinlenmiştir. En büyük fark, uygulamanız için tüm durumu içeren bir durum nesnesini saran tek bir mağaza kullanmasıdır. Flux'ta yaptığınız gibi mağazalar oluşturmak yerine, tek bir nesne durumunu değiştirecek indirgeyici işlevleri yazacaksınız. Bu nesne, uygulamanızdaki tüm durumu temsil eder. Redux'da mevcut eylemi ve durumu alırsınız ve yeni bir durum döndürürsünüz. Bu, eylemlerin ardışık ve durumun değişmez olduğu anlamına gelir. Bu beni Redux'daki en açık alemlere (bence) getiriyor.

Neden Değişmezlik?

Bunun birkaç nedeni vardır:
1. Tutarlılık - mağazanın durumu her zaman bir redüktör tarafından değiştirilir, bu yüzden kimin neyi değiştirdiğini izlemek kolaydır.
2. Performans - değişmez olduğu için, Redux'un sadece önceki durumun = = şu anki durumunun olup olmadığını kontrol etmesi gerekir. Belirlenen işleme için durumu her seferinde döngü yapmaya gerek yoktur.
3. Hata Ayıklama - Time Travel Hata Ayıklama ve Hot Reloading gibi yeni harika kavramlar .

GÜNCELLEME: Eğer bu yeterince ikna olmuyorsa, Lee Byron'un Dayanıklı Kullanıcı Arayüzleri hakkında mükemmel konuşmasını izleyin .

Redux, bu fikri korumak için kod tabanı / kütüphaneler aracılığıyla bir geliştirici (ler) disiplini gerektirir. Kütüphaneleri seçtiğinizden ve kodu değiştirilemez şekilde yazdığınızdan emin olmanız gerekir.

Flux kavramlarının farklı uygulaması (ve ihtiyaçlarınız için en iyi olanı) hakkında daha fazla bilgi edinmek istiyorsanız, bu yararlı karşılaştırmaya göz atın .

Sonra söyledim, itiraf etmeliyim ki Redux JS gelecekteki gelişimi nereye gidiyor (bu satırları yazmak için).

Redux'u diğer Flux alternatiflerine göre kullanmanın en büyük avantajlarından biri, düşüncelerinizi daha işlevsel bir yaklaşıma doğru yönlendirebilmesidir. Kabloların birbirine nasıl bağlandığını anladıktan sonra, tasarımdaki çarpıcı zarafetini ve sadeliğini fark edersiniz ve asla geri dönemezsiniz.

Ben kullanmayı tercih Redux devlet yönetimi çok daha kolay karşılaştırmak kılan tek mağaza kullanır Flux , ayrıca Redux DevTools'un o size bazı yararlı verilerle devlet ile yaptığını görelim gerçekten yararlı araçlar var ve gerçekten inline gelişmekte araçları tepki beraber.

Ayrıca Redux , Angular gibi diğer popüler çerçevelerle daha fazla esnekliğe sahiptir . Her neyse, Redux'un kendisini bir çerçeve olarak nasıl tanıttığını görelim.

Redux, Redux'u çok iyi tanıtabilen Üç İlkeye sahiptir ve Redux ve Flux arasındaki ana farktır.

Tek hakikat kaynağı

Tüm uygulamanızın durumu, tek bir mağaza içindeki bir nesne ağacında saklanır.

Bu, sunucunuzdaki durumun fazladan kodlama çabası olmadan istemciye serileştirilebileceği ve hidratlanabileceği için evrensel uygulamalar oluşturmayı kolaylaştırır. Tek bir durum ağacı aynı zamanda bir uygulamanın hatalarını ayıklamayı veya incelemeyi kolaylaştırır; ayrıca daha hızlı bir geliştirme döngüsü için uygulamanızın durumunu geliştirmeye devam etmenizi sağlar. Geleneksel olarak uygulanması zor olan bazı işlevler (örneğin, Geri Al / Yinele), tüm durumunuz tek bir ağaçta saklanıyorsa, aniden uygulanması önemsiz hale gelebilir.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

Eyalet salt okunur

Durumu değiştirmenin tek yolu, bir eylem, ne olduğunu açıklayan bir nesne yaymaktır.

Bu, ne görünümlerin ne de ağ geri çağrılarının hiçbir zaman doğrudan duruma yazmamasını sağlar. Bunun yerine, devleti dönüştürme niyetini ifade ediyorlar. Tüm değişiklikler merkezileştirildiğinden ve katı bir sırayla tek tek gerçekleştiğinden, dikkat edilmesi gereken ince yarış koşulları yoktur. Eylemler sadece düz nesneler olduğundan, hata ayıklama veya test amacıyla kaydedilebilir, serileştirilebilir, saklanabilir ve daha sonra tekrar oynatılabilir.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

Değişiklikler saf işlevlerle yapılır

Durum ağacının eylemlerle nasıl dönüştürüleceğini belirlemek için saf indirgeyiciler yazarsınız.

Redüktörler sadece önceki durumu ve eylemi alan ve sonraki durumu döndüren saf işlevlerdir. Önceki durumu değiştirmek yerine yeni durum nesnelerini döndürmeyi unutmayın. Tek bir redüktörle başlayabilir ve uygulamanız büyüdükçe, eyalet ağacının belirli bölümlerini yöneten daha küçük redüktörlere bölebilirsiniz. Redüktörler sadece işlevler olduğundan, çağrılma sırasını kontrol edebilir, ek veri aktarabilir ve hatta sayfalandırma gibi yaygın görevler için yeniden kullanılabilir redüktörler yapabilirsiniz.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

daha fazla bilgi için burayı ziyaret edin

Redux değişmezlik konusunda disiplin gerektirir. Önerebileceğim bir şey, herhangi bir yanlışlıkla durum mutasyonu hakkında bilgi vermek için ng-dondurmasıdır.

Bildiğim kadarıyla, redux akıdan ilham alıyor. flux, MVC (model görüntüleme denetleyicisi) gibi bir mimaridir. facebook, MVC kullanırken ölçeklenebilirlik sorunu nedeniyle akıyı tanıtmaktadır. yani akı bir uygulama değil, sadece bir kavramdır. Aslında redux akı uygulamasıdır.