Yeniden kaydetme listesinden öğe kaldırılıyor ve listeye yeniden yönlendiriliyor - geciktirme araçları değerlendiriliyor mu?

Question

Adımlar listesiyle görüntüleme yaşıyorum. Her adım, "görünüm" ekranından "görüntülenebilir" ve "kaldırılabilir" olabilir. Ben bu adımı kaldırılmasını istiyorum "adımı Sil" vurduğunda ("ayrıntılar" içinden)

const mapStateToProps = (state, ownProps) => { 
    let stepId = ownProps.params.stepId; 
    let step = state.steps.find(s => s.id === stepId); 
    return {step}; 
}; 

Şimdi: Benim StepDetails bileşeni basit steps.find(...) ile mağazanın steps bölümünden gelen adımı getirecek şekilde redux deposuna bağlanır mağazadan ve liste görünümüne gitmek istiyorum.

kaldırıldı bu olmadan yeni adımlar listesini döndürür ve sonradan denir redirect silme üzerine çağrılan redux işlem yoktur:

const deleteStep = (stepId) => { 
    return dispatch => { 
    return stepsApi.deleteStep(stepId).then(steps => { 
     dispatch(action(STEPS_LIST_CHANGED, {steps})); 
     // react-router-redux action to redirect 
     dispatch(redirectToList()); 
    }) 
    } 
}; 

Bu normaldir ve bir dezavantajı ile ne istiyorum yapar: STEPS_LIST_CHANGED eylem olduğunda çağırdı ve adım listeden kaldırılır, bu yeniden yönlendirme önce benim bileşenimin mapStateToProps çağırır. Sonuç şu ki, mapStateToProps artık bu adımı artık bulamıyor ve bileşenim bana adımın tanımlanmamış olduğu hataları veriyor.

Yapabildiğim şey, bileşene sağlanan adımın tanımlanıp karşılanmadığını kontrol etmemek, vb. Savunmasız bir programlama çeşidi Ben gerçekten hoşlanmıyorum, çünkü bileşenimin yanlış veri alması durumunda ne yapacağını bilmesini istemiyorum.

Ayrıca, eylemleri gönderme sırasını değiştirebilirim: önce yönlendir ve sonra durumu değiştir, ancak sonra da doğru hissetmiyor (mantıksal olarak önce silmek ve sonra yeniden yönlendirmek).

Bu gibi durumlarla nasıl başa çıkıyorsunuz?

DÜZENLEME: Bu boş/kapsayıcı bileşenine tanımsız kontrol (redux kablolama yapar bir) koymak oldu I bitti ne . Bu yaklaşımla sunum bileşenlerini gereksiz mantıkla karıştırmam. Gerekli bazı sahneler mevcut olmadığında, null veya <div></div>'u oluşturmak için daha yüksek sipariş bileşenine (veya muhtemelen ES7 dekoratörüne) de soyutlanabilir.

Answer 1

Ben iki yaklaşımın düşünebilirsiniz:

• listesini temsilci seçme yönlendirme değiştirildi?

  dispatch(redirectToList(action(STEPS_LIST_CHANGED, {steps}))); 
  

• render görmezden boş adım bileşeni Handling: Örneğin:

  shouldComponentUpdate: function() { 
      return this.state.steps != null; 
  } 
  

Answer 2

Sen bir diziye dönüş deyimini değiştirebilir

const mapStateToProps = (state, ownProps) => { 
    let stepId = ownProps.params.stepId; 
    let step = state.steps.find(s => s.id === stepId); 
    return step ? [{step}] : [] 
}; 

üzerindeki bu yolu olan Bileşen, bir step.map() yapabilir ve işleyebilirsiniz.