Yuvalanmış Redux konteynerlerini sahne geçirmeden yönetme?

Question

Böyle bir bileşen hiyerarşisi Verilen:

<TodoList> 
    <Todo> 
    <TodoHeader/> 
    <TodoBody> 
     <TodoDetails> 
     <TodoStatus /> 
     <TodoDetails> 
     <TodoDescription /> 
    <TodoBody> 
    <Todo> 
</TodoList> 

... ve bunun gibi bir mağaza:

{ 
    todos: [ 
    { id: 1, status: "INCOMPLETE", header: "title one", description: "do a something" }, 
    { id: 2, status: "INCOMPLETE", header: "title two", description: "something else" }, 
    { id: 3, status: "COMPLETE", header: "title three", description: "one more thing" }, 
    ] 
} 

gerek kalmadan mağazaya bağlanmak için iç içe TodoStatus bileşen için iyi bir yolu var mı id'u bileşen hiyerarşisini sahne olarak geçirin mi? Örneğin, Todo, currentTodoId = 1'u içerik olarak ayarlayabilir; bu, alt redüktörler için kullanılabilir, ancak alternatifler var mı? Belki de ana bileşenin deponuzu 'a indirgemesinin bir yolu, çocuk bileşenlerinin daha sonra görebilmesinin bir yolu ...?

Bu noktada, muhtemelen "neden" diye sormak istersiniz? Eh, TodoList (todos dizisi üzerinde çalışan) ve yuvalanmış TodoStatus (sadece tek bir todo üzerinde çalışmak isteyen) arasında kesinlikle sunum bileşenleri birkaç düzeyde olabileceğini düşünün. Böyle bir hiyerarşi aşağı todoId geçmek zorunda oldukça acı verici: Bu noktada

<TodoList> 
    <Todo todoId={1}> 
    <SomeAnimation todoId={1}> 
     <SomeLayout todoId={1}> 
     <SomeOtherAnimation todoId={1}> 
      <SomeDebugContainer todoId={1}> 
      <TodoHeader todoId={1}> 
      <TodoBody todoId={1}> 
       <TodoDetails todoId={1}> 
       <TodoStatus todoId={1}> // yay! 

, bu bağlam için iyidir tepki, yani bir Redux özgü desen muhtemelen orada değil etkilenirse ne olduğunu hayal ediyorum ama yanılmak isterdim!

Answer 1

Neden hepsi bağımsız değişken olarak id kabul etmek gerekiyor?

kabul edeceğini hiyerarşi (örneğin Todo) içinde Genellikle bazı bileşen daha yüksek ya id veya todo, ancak aşağıda bileşenleri daha kabul ettikleri ne özgü, örneğin olurdu Bu örnekte

function Todo({ todo }) { 
    return (
    <SomeAnimation> 
     <SomeLayout> 
      <SomeOtherAnimation> 
      <SomeDebugContainer> 
       <TodoHeader title={todo.title} /> 
       <TodoBody {...todo} /> 
      </SomeDebugContainer> 
      </SomeOtherAnimation> 
     </SomeLayout> 
    </SomeAnimation> 
) 
} 

, TodoHeader sadece doğrudan title pervane alır. Daha fazla sahne gerekiyorsa, özelliklerini {...todo} ile <TodoBody> içinde yaptığım gibi yayılabilir. Örneğinizden, SomeAnimation gibi bileşenlerin todo ID'yi bilmesi gerekliliğinden de anlaşılmamalıdır; muhtemelen bazı görsel özelliklerinin geçmesi yeterli olacaktır.

Benzer şekilde, TodoBody gibi iç bileşenler aşağı onların sahne bazılarını geçebilir, ancak yine bu kimlik olmak zorunda değildir: render() döndü genel, derin ağaçlarda

function TodoBody({ title, text, status }) { 
    return (
    <div> 
     <TodoDetails text={text} /> 
     <TodoStatus status={status} /> 
    </div> 
) 
} 

genellikle bileşen anlamına Yapı, optimal değildir.Her bileşende this.props.children'u kullanmak zorunda değilsiniz; bileşenleri kendi oluşturma işlemlerinde kontrol altında tutmaktan ve sadece bunlara gerekli olan şeyleri iletmekten çekinmeyin. Bazen bir id'un geçirilmesi elverişlidir, diğer zamanlarda doğrudan veri aktarımı, bağımlılıkları daha açık hale getirir.

Answer 2

Connect, her bir Todo'nun bir sunum bileşeni olduğunu ve redux mağazası veya uygulamasıyla ilgili hiçbir şeyi görmezden gelmeniz gerektiğini düşündüğünüz gibi kötü bir fikir gibi görünüyor.

Bir projede aynı sorunu yaşıyorum, çünkü sanırım acı verici görünüyor, ancak her bir öğeyi yeniden kullanılabilir hale getiriyor ve kodu basitleştiriyor (kodun miktarı değil, mantık). "Düzeyleri" sayısını sınırlamak için tepkime çocuklarının kapsüllemesini kullanarak dom/bileşen yapınızı basitleştirebilir misiniz? Çok fazla yardımcı olduğumdan emin değilim. Harika bir çözüm bulursanız, bunu okumaktan memnuniyet duyarız.

İyi şanslar