एक प्रतिक्रिया पुन: प्रयोज्य घटक के लिए डिज़ाइन रेडक्स क्रियाएं और reducers

Question

मैं रेडक्स और प्रतिक्रिया के साथ एक बड़ा अनुप्रयोग विकसित कर रहा हूं और मैंने कस्टम चेकबॉक्स और रेडियो बटन जैसे कुछ पुन: प्रयोज्य घटक बनाने का निर्णय लिया है।

जैसा कि मैं इस जानकारी को रेडक्स स्टोर में स्टोर करना चाहता हूं ताकि एप्लिकेशन की स्थिति को आसानी से डीबग कर सकें और उसी घटक में हर जगह समान कार्यक्षमता हो, ऐसा लगता है कि प्रत्येक घटक के लिए reducers और क्रियाएं बनाना एक अच्छा विचार है।

हालांकि रेडक्स रेड्यूसर एक नया राज्य लौटाते हैं और इसे एक कुंजी के रूप में रेड्यूसर के नाम से स्टोर में सहेजते हैं और यह उसी पृष्ठ में एक ही प्रकार के एक से अधिक घटक होते हैं जो एक ही क्रिया और reducers का उपयोग करते हैं विभिन्न राज्यों

मुझे लगता है कि इस समस्या का दो समाधान देखते हैं:

• प्रत्येक घटक है कि मैं का उपयोग के लिए विभिन्न कार्यों और reducers बनाएं, यहां तक ​​कि घटक सोचा और यह कार्यक्षमताओं ही कर रहे हैं है। यह समाधान एक अच्छा समाधान प्रतीत नहीं होता है क्योंकि बहुत सारे अनावश्यक कोड होंगे।

• रेड्यूसर में प्रत्येक को अलग करने में सक्षम होने के लिए पर्याप्त पैरामीटर के साथ क्रियाएं बनाएं और इस तरह निर्दिष्ट राज्य का केवल हिस्सा ही बदलें।

मैं दूसरे विकल्प के साथ आगे बढ़ गया।

क्रिया चेक बॉक्स घटक के लिए फ़ाइल:

import {createAction} from 'redux-actions'; 

/****** Actions ******/ 
export const CHANGE_CHECKBOX_STATE = "CHANGE_CHECKBOX_STATE"; 

/****** Action creators ******/ 
export const changeCheckboxState = createAction(CHANGE_CHECKBOX_STATE, (block, name, state) => { 
    return { 
    block, 
    name, 
    state: { 
     checked: state, 
    } 
    }; 
}); 

कम करने वाली चेक बॉक्स घटक के लिए फ़ाइल:

import {handleActions} from 'redux-actions'; 

import {CHANGE_CHECKBOX_STATE} from './CheckBox.actions'; 

export const checkBoxComponent = handleActions({ 
    CHANGE_CHECKBOX_STATE: (state, action) => ({ 
    [action.payload.block]: { 
     [action.payload.name]: action.payload.state 
    } 
    }) 
}, {}); 

मैं block का उपयोग पेज, name विशिष्ट घटक का नाम निर्दिष्ट करने के लिए निर्दिष्ट करने के लिए (उदाहरण के लिए लिंग) और राज्य के रूप में राज्य और नए राज्य के साथ वस्तु।

लेकिन इस समाधान में कुछ समस्याएं भी है: क्योंकि राज्य की कुंजियां गतिशील हैं

• प्रत्येक घटक की प्रारंभिक अवस्था को निर्दिष्ट नहीं कर सकते।
• बहुत से घोंसले वाले राज्यों के साथ स्टोर संरचना के लिए जटिल है।
• घटक द्वारा डेटा एकत्र करता है और फॉर्म द्वारा नहीं जो डीबगिंग को जटिल करेगा और यह तर्कसंगत रूप से गलत है।

मेरे पास Redux के साथ पर्याप्त अनुभव नहीं है और इस समस्या के बेहतर समाधान के बारे में सोचने के लिए प्रतिक्रिया है।

• यह एक अच्छा विचार Redux की दुकान में यह पुन: प्रयोज्य घटकों के राज्य स्टोर करने के लिए है: लेकिन यह है कि मैं प्रतिक्रिया-Redux रिश्ते के बारे में कुछ महत्वपूर्ण याद कर रहा हूँ और यह कुछ भी सवाल उठे हैं मुझे लगता है?

• क्या मैं रेडक्स क्रियाओं और reducers के साथ एक साथ बाध्यकारी में गलत हूँ?

Answer 1

यहां मौलिक गलती यह है कि आपके पास 0 गूंगा घटक हैं।चेकबॉक्स जैसे बुनियादी नियंत्रण केवल प्रोप का उपयोग करके गूंगा घटक होना चाहिए, उनके माता-पिता को किसी विशेष चेकबॉक्स के लिए राज्य के उचित टुकड़े को चुनने और अपडेट करने की ज़िम्मेदारी है।

Answer 2

उस राज्य का उपभोग करने वाले घटकों के संदर्भ में अपने रेडक्स रेड्यूसर (आपका समग्र आवेदन स्थिति) का वर्णन न करें। इसे अपने तरीके से वर्णित तरीके से वर्णित करें, और फिर अपने "गूंगा" घटक वर्णनात्मक स्थिति का उपभोग करें।

"foo से संबंधित फॉर्म के लिए इस चेकबॉक्स की स्थिति" को ट्रैक करने के बजाय, "यह बूलियन मान foo" ट्रैक करें और उसके बाद चेकबॉक्स उस स्थिति का उपभोग करें।

चेकबॉक्स के लिए एक उदाहरण की दुकान:

const initialState = { 
    someFooItem: { isCertainType: false } 
}; 

export function foos(state = initialState, action) { 
    switch(action.type){ 
     case(UPDATE_FOO_VALUE): 
      return { 
       ...state, 
       [action.payload.id]: { 
        isCertainType: action.payload.isCertainType 
       } 
      } 
    } 
} 

एक उदाहरण चेकबॉक्स दुकान

class CheckBox extends React.Component { 
    render() { 
     return <input type="checkbox" checked={this.props.checked} /> 
    } 
} 

माता पिता घटक लेने वाली

class ParentComponent extends React.Component { 
    render() { 
     return <CheckBox checked={this.foo.isCertainType} /> 
    } 
}