🤑 🖐🏼 👩🏾‍💻 एक मानक वर्ग के माध्यम से reducer का संगठन 🚣🏿 🕎 📼

अभिवादन, आज मैं आपके साथ बात करने जा रहा हूं कि Reducer कैसे व्यवस्थित है। और यह बताने के लिए कि मैं कहां से शुरू हुआ था और क्या करने आया था।

इसलिए, Reducer के आयोजन के लिए एक निश्चित मानक है और यह इस तरह दिखता है:

export default function someReducer(state = initialState, action) { switch (action.type) { case 'SOME_REDUCER_LABEL': return action.data || {}; default: return state; } }

यहां सब कुछ सरल और स्पष्ट है, लेकिन इस तरह के निर्माणों के साथ थोड़ा काम करने के बाद, मैंने महसूस किया कि इस पद्धति में कई कठिनाइयां हैं।

टैग को किसी तरह संग्रहीत करने की आवश्यकता है, क्योंकि वे परियोजना के साथ रेंगना शुरू कर देते हैं और नियंत्रकों से बहुत दूर क्रॉल करते हैं।
लेबल को अद्वितीय बनाना पड़ा, क्योंकि अन्यथा अन्य reducers के साथ एक चौराहा हो सकता है
अधिकांश समय जब ऐसी संरचना के साथ काम करते हुए आने वाले डेटा को संसाधित करने के बजाय कोड को व्यवस्थित करने पर खर्च किया जाता था
और जब reducer में बहुत सारे लेबल होते हैं, तो कोड मैला और पढ़ने में कठिन हो जाता है, और सामान्य नामस्थान खुले तौर पर मुझे खुश नहीं करते हैं।
उसी समय, हमने साइड इफेक्ट्स को संसाधित करने के लिए सागों का उपयोग करना शुरू कर दिया। इसने हमें कॉलबैक के उपयोग के बिना सर्वर साइड के साथ संचार की सुविधा प्रदान करने की अनुमति दी।

अब हमें यह बताने की जरूरत है कि साइड इफेक्ट के काम करने के बाद किस reducer को बुलाया जाना चाहिए।

मेरे द्वारा पाया गया सबसे समझदार विकल्प एक एक्शन क्रिएटर बनाना है।

और हमारा पिछला कोड इस तरह दिखने लगा:

  import { FetchSaga } from '../../helpers/sagasHelpers'; const SOME_REDUCER_LABEL = 'SOME_REDUCER_LABEL'; export const someReducerLabelActionCreator = FetchSaga.bind(this, SOME_REDUCER_LABEL); export default function someReducer(state = initialState, action) { switch (action.type) { case SOME_REDUCER_LABEL: return action.data || {}; default: return state; } }

FetchSaga एक एक्शन जनरेटर फ़ंक्शन है (बाद में एक एक्शन क्रिएटर के रूप में संदर्भित) एक गाथा के लिए जो सर्वर से डेटा का अनुरोध करता है और इसे एक रिड्यूसर पर भेजता है, जिसका लेबल आरंभीकरण चरण (SOME_REDUCER_LABEL) में फ़ंक्शन के लिए दिया गया था।

अब, reducer के लेबल या तो reducer से निर्यात किए गए थे, या एक्शन क्रिएटर को reducer से सागा और मानक दोनों के लिए निर्यात किया गया था। इसके अलावा, इस तरह के एक हैंडलर प्रत्येक लेबल के लिए बनाया गया था। इसने केवल एक सिरदर्द जोड़ा, क्योंकि एक बार जब मैंने रिड्यूसर खोला, तो मैंने डिफाइनिंग लेबल के 10 स्थिरांक गिना, फिर कुछ एक्शन क्रिएटर्स के लिए सागा और फिर रिड्यूसर के स्टेट प्रोसेसिंग फंक्शन के लिए कुछ कॉल किए, यह कुछ इस तरह दिखाई दिया

 import { FetchSaga } from '../../helpers/sagasHelpers'; const SOME_REDUCER_LABEL1 = 'SOME_REDUCER_LABEL1';  .... const SOME_REDUCER_LABEL10 = 'SOME_REDUCER_LABEL10'; export const someReducerLabelActionCreator1 = FetchSaga.bind(this, SOME_REDUCER_LABEL1);   ..... export const someReducerLabelActionCreator10 = FetchSaga.bind(this, SOME_REDUCER_LABEL10); export default function someReducer(state = initialState, action) { switch (action.type) { case SOME_REDUCER_LABEL: return action.data || {}; case SOME_REDUCER_LABEL1: return action.data || {}; case SOME_REDUCER_LABEL2: return action.data || {}; case SOME_REDUCER_LABEL3: return action.data || {}; .... default: return state; } }

नियंत्रक में इन सभी कार्यों को आयात करते समय, कि एक को भी इतना फुलाया गया था। और यह रास्ते में मिल गया।

इतने सारे reducers को देखने के बाद, मुझे लगा कि हम बहुत सारे यूटिलिटी कोड लिख रहे हैं जो कभी नहीं बदलते। इसके अलावा, हमें यह सुनिश्चित करना चाहिए कि हम घटक को क्लोन स्थिति भेजते हैं।

तब मेरे पास रिड्यूसर को मानकीकृत करने का विचार था। उसके सामने कार्य कठिन नहीं थे।

आने वाली कार्रवाई की जांच करें और पुरानी स्थिति को वापस करें यदि कार्रवाई वर्तमान reducer या स्वचालित रूप से क्लोन राज्य के लिए नहीं है और इसे हैंडलर विधि से पास करें, जो राज्य को बदल देगा और घटक को वापस कर देगा।
आपको लेबल का उपयोग करना बंद करना चाहिए, इसके बजाय, नियंत्रक को एक ऑब्जेक्ट प्राप्त करना चाहिए जिसमें हमारे द्वारा रुचि रखने वाले reducer के लिए सभी एक्शन क्रिएटर्स हों।
इस प्रकार, इस तरह के सेट को एक बार आयात करने के बाद, मैं इसे फिर से आयात करने की आवश्यकता के बिना किसी भी संख्या में एक्शन क्रिएटर्स को रिड्यूसर से कंट्रोलर को फ़ंक्शंस भेजने के लिए फेंक सकता हूं।
एक सामान्य नाम स्थान के साथ एक अनाड़ी स्विच-केस का उपयोग करने के बजाय, जो लिंटर का उपयोग करता है, मैं प्रत्येक क्रिया के लिए एक अलग विधि रखना चाहता हूं, जिसमें reducer के क्लोन स्थिति और कार्रवाई स्वयं स्थानांतरित हो जाएगी
रेड्यूसर से नए रेड्यूसर का वारिस होना अच्छा होगा। मामले में तर्क दोहराता है, लेकिन उदाहरण के लिए लेबल के एक अलग सेट के लिए।

यह विचार मुझे व्यवहार्य लगा और मैंने इसे लागू करने का प्रयास करने का निर्णय लिया।

यहाँ क्या औसत reducer अब की तरह लग रहे थे

  //    ,        reducer' import stdReducerClass from '../../../helpers/reducer_helpers/stdReducer'; class SomeReducer extends stdReducerClass { constructor() { super(); /**   reducer'.   reducer    action,     */ this.prefix = 'SOME_REDUCER__'; } /**   ,     reducer - type - ,    . -        ,     action creator,  SOME_REDUCE__FETCH.   type        action creator  someReduceInstActions - method - ,      action,            - sagas -    ,   ,       .    ,   action creator  ,      SOME_REDUCE__FETCH,  ,   ,      reducer    . */ config = () => [ { type: 'fetch', method: this.fetch, saga: 'fetch' }, { type: 'update', method: this.update }, ]; //           action creators init = () => this.subscribeReduceOnActions(this.config()); //  ,      fetch = (clone, action) => { //       return clone; }; //  ,         update = (clone, action) => { //       return clone; }; } const someReducerInst = new SomeReducer(); someReducerInst.init(); //   action creators   config //    action creator      export const someReducerInstActions = someReducerInst.getActionCreators(); //    .   checkActionForState    Action  ,      reducer'   export default someReducerInst.checkActionForState;

stdReducerClass अंदर से निम्नानुसार है

 import { cloneDeep } from 'lodash'; //    lodash //        ,            import { FetchSaga } from '../helpers/sagasHelpers/actions'; export default class StdReducer { _actions = {}; actionCreators = {}; /** UNIQUE PREFIX BLOCK START */ /**      ,  .   ,   ,    ,  reducer    action       */ uniquePrefix = ''; set prefix(value) { const lowedValue = value ? value.toLowerCase() : ''; this.uniquePrefix = lowedValue; } get prefix() { return this.uniquePrefix; } /** INITIAL STATE BLOCK START */ /**   initialState      reducer'. */ initialStateValues = {}; set initialState(value) { this.initialStateValues = value; } get initialState() { return this.initialStateValues; } /** PUBLIC BLOCK START */ /** *        init() .   ,      Config, action creator   _subscribeAction * actionsConfig -     ,     {type, method, saga?}     ,     action creator          */ subscribeReducerOnActions = actionsConfig => actionsConfig.forEach(this._subscribeAction); /**      _subscribeAction,    ,        type.  , reducer  ,       action. */ _subscribeAction = (action) => { const type = action.type.toLowerCase(); this._actions[type] = action.method; //       this.actionCreators[type] = this._subscribeActionCreator(type, action.saga); //   action creator   } /** _subscribeActionCreator -   , action creator          -   saga    ,      -   fetch           ,             type    ,   ,    action creator,  ,     SOME_Reducer__,      FETCH,      SOME_Reducer__FETCH,     action creator */ _subscribeActionCreator = (type, creatorType) => { const label = (this.prefix + type).toUpperCase(); switch (creatorType) { case 'fetch': return this._getFetchSaga(label); default: return this._getActionCreator(label); } } /** _getFetchSaga -     ,          */ _getFetchSaga = label => FetchSaga.bind(this, label); /** _getActionCreator -  action creator,      ,   ,    . */ _getActionCreator = label => (params = {}) => ({ type: label, ...params }); /**    ,      playload.     action   ,    */ checkActionForState = (state = this.initialState || {}, action) => { if (!action.type) return state; const type = action.type.toLowerCase(); const prefix = this.prefix;       ,    ,   . const internalType = type.replace(prefix, ''); //        if (this._actions[internalType]) { //     -    const clone = cloneDeep(state); //  ,    ,  action  ,     //        return this._actions[internalType](clone, action); } //   ,   action   .     return state; } /**       action creator,    reducer */ getActionCreators = () => this.actionCreators; }

यह नियंत्रक में कैसे दिखता है? और ऐसा है

 import { someReducerInstActions } from '../../../SomeReducer.js' const mapDispatchToProps = dispatch => ({ doSoAction: (params) => dispatch(someReducerInstActions.fetch(url, params)), doSoAction1: (value, block) => dispatch(someReducerInstActions.update({value, block})), });

इसलिए, हमारे पास क्या परिणाम है:

टैग्स को जमा करने से छुटकारा मिला
नियंत्रक में आयात का एक गुच्छा से छुटकारा मिल गया
स्विच-केस हटाया
उन्होंने सगाओं को एक बार हराया और अब हम उनके सेट को एक स्थान पर विस्तारित कर सकते हैं, यह सुनिश्चित करते हुए कि सभी वारिस स्वचालित रूप से अतिरिक्त प्रभाव प्रभाव प्राप्त करेंगे
हमें रिड्यूसर्स से वारिस करने का अवसर मिला, अगर संबंधित तर्क है (फिलहाल यह मेरे लिए कभी उपयोगी नहीं था =))
उन्होंने डेवलपर से एक वर्ग के लिए क्लोनिंग की जिम्मेदारी को स्थानांतरित कर दिया जो निश्चित रूप से इसे करना याद रखेगा।
रिड्यूसर बनाते समय कम दिनचर्या
प्रत्येक विधि में एक पृथक नाम स्थान है

मैंने हर चीज का यथासंभव वर्णन करने की कोशिश की =) क्षमा करें, यदि भ्रमित हो, तो चुची लेखक नहीं है। मुझे उम्मीद है कि मेरा अनुभव किसी के लिए उपयोगी होगा।

→ वर्तमान उदाहरण यहाँ देखा जा सकता है

पढ़ने के लिए धन्यवाद!

UPD: निश्चित त्रुटियां। उन्होंने रात में लिखा, खराब तरीके से इसे पढ़ा। उन्हें इतनी विनम्रता से इंगित करने के लिए धन्यवाद =)

एक मानक वर्ग के माध्यम से reducer का संगठन

More articles: