Redux: आयोजन कंटेनर, घटक, कार्यों और reducers

Question

प्रश्न:

सबसे पोषणीय और सिफारिश की एक बड़ी React/Redux आवेदन में कंटेनर, घटक, कार्यों और reducers के आयोजन के लिए सर्वोत्तम तरीका क्या है ?

मेरी राय:

वर्तमान प्रवृत्तियों जुड़े कंटेनर घटक चारों ओर redux कोलेटरल (कार्रवाई, reducers, कहानियों ...) व्यवस्थित करने के लिए लग रहे हैं। जैसे

/src 
    /components 
     /... 
    /contianers 
     /BookList 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js 
     /BookSingle 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js   
    app.js 
    routes.js 

यह बहुत अच्छा काम करता है! हालांकि इस डिजाइन के साथ कुछ समस्याएं प्रतीत होती हैं।

मुद्दे:

जब हम एक और कंटेनर यह एक विरोधी पैटर्न लगती से actions, selectors या sagas का उपयोग करने की जरूरत है। आइए मान लें कि हमारे पास एक वैश्विक /App कंटेनर है जो एक रेड्यूसर/स्टेटस है जो पूरे स्टोर पर श्रेणियों और संख्याओं जैसे सूचनाओं को संग्रहीत करता है। ऊपर के उदाहरण से इसे जारी रखते हुए, एक राज्य के पेड़ के साथ:

{ 
    app: { 
     taxonomies: { 
      genres: [genre, genre, genre], 
      year: [year, year, year], 
      subject: [subject,subject,subject], 
     } 
    } 
    books: { 
     entities: { 
      books: [book, book, book, book], 
      chapters: [chapter, chapter, chapter], 
      authors: [author,author,author], 
     } 
    }, 
    book: { 
     entities: { 
      book: book, 
      chapters: [chapter, chapter, chapter], 
      author: author, 
     } 
    }, 
} 

हम अपने /BookList कंटेनर हम या तो /BookList/selectors.js में फिर से बनाना होगा भीतर /App कंटेनर से एक selector का उपयोग करें (निश्चित रूप से गलत?) या यह आयात करना चाहते हैं /App/selectors से (क्या यह हमेशा सटीक चयनकर्ता होगा ..? नहीं।)। इन दोनों appraoches मेरे लिए उप-इष्टतम लगते हैं।

इस उपयोग के मामले का मुख्य उदाहरण प्रमाणीकरण है (आह ... auth हम आपको नफरत करते हैं) क्योंकि यह बहुत आम "साइड-इफेक्ट" मॉडल है। हमें अक्सर पूरे ऐप पर /Auth सागा, क्रियाएं और चयनकर्ताओं तक पहुंचने की आवश्यकता होती है। हमारे पास कंटेनर /PasswordRecover, /PasswordReset, /Login, /Signup .... वास्तव में हमारे ऐप में हमारे /Auth contianer का कोई वास्तविक घटक नहीं है!

/src 
    /contianers 
     /Auth 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 

बस ऊपर वर्णित विभिन्न और अक्सर गैर-संबंधित लेख कंटेनर के लिए सभी रेडक्स कॉललेटर शामिल हैं।

Answer 1

मैं व्यक्तिगत रूप से ducks-modular-redux प्रस्ताव का उपयोग करता हूं।

यह "आधिकारिक" अनुशंसित तरीका नहीं है लेकिन यह मेरे लिए बहुत अच्छा काम करता है। प्रत्येक "बतख" में actionTypes.js, actionCreators.js, reducers.js, sagas.js और selectors.js फ़ाइलें शामिल हैं। चक्रीय निर्भरता या duck circle से बचने के लिए इन फ़ाइलों में अन्य बतखों की कोई निर्भरता नहीं है, प्रत्येक "बतख" में केवल वह तर्क होता है जिसे इसे प्रबंधित करना होता है।

components/ फ़ोल्डर

containers/ फ़ोल्डर कंटेनरों से बनाया होता है मेरे ऐप्लिकेशन के सभी शुद्ध घटक शामिल हैं:

फिर, जड़ में मैं एक components और एक containers फोल्डर और कुछ जड़ फ़ाइलें उपरोक्त शुद्ध घटक। जब किसी कंटेनर को एक विशिष्ट selector की आवश्यकता होती है जिसमें कई "बतख" शामिल होते हैं, तो मैं इसे उसी फ़ाइल में लिखता हूं जहां मैंने <Container/> घटक लिखा था क्योंकि यह इस विशिष्ट कंटेनर से संबंधित है। यदि selector को कई कंटेनर accros साझा किया गया है, तो मैं इसे एक अलग फ़ाइल में बना सकता हूं (या एक होक में जो इन प्रोप प्रदान करता है)।

rootReducers.js:

/* let's consider this state shape 

state = { 
    books: { 
     items: { // id ordered book items 
      ... 
     } 
    }, 
    taxonomies: { 
     items: { // id ordered taxonomy items 
      ... 
     } 
    } 
} 

*/ 
export const getBooksRoot = (state) => state.books 

export const getTaxonomiesRoot = (state) => state.taxonomies 

: बस अपने मामले में सभी reducers

rootSelectors.js को उजागर करता है राज्य के हर टुकड़ा के लिए रूट चयनकर्ता के संयोजन, उदाहरण के लिए आप की तरह कुछ हो सकता था द्वारा जड़ reducers को उजागर करता है

यह हमें प्रत्येक बतख selectors.js फ़ाइल के अंदर राज्य आकार को "छिपाने" देता है। चूंकि प्रत्येक selector अपने बतख के अंदर पूरे राज्य प्राप्त आप बस अपने selector.js फ़ाइलों के अंदर इसी rootSelector आयात करने के लिए किया है।

rootSagas.js अपने बतख के अंदर सभी कहानियों की रचना और जटिल कई "बतख" से जुड़े प्रवाह का प्रबंधन।

अपने मामले में

तो, संरचना हो सकता है:

components/ 
containers/ 
ducks/ 
    Books/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
    Taxonomies/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
rootSelectors.js 
rootReducers.js 
rootSagas.js 

जब मेरी "बतख" काफी छोटे हैं, मैं अक्सर फ़ोल्डर बनाना छोड़ सकते हैं और सीधे इन सभी 5 फाइलों के साथ एक ducks/Books.js या एक ducks/Taxonomies.js फ़ाइल लिखने (actionTypes.js, actionCreators.js, reducers.js, selectors.js, sagas.js) एक साथ विलय हो गया।