Reducer संगठन - एक कदम आगे ले जाना

हम यहाँ क्या करने जा रहे हैं?

हम अपने Redux / NGRX ऐप में रिड्यूसर्स के विकास का अवलोकन करने जा रहे हैं जो पिछले दो वर्षों में हुआ था। वेनिला switch-case से शुरू, कुंजी द्वारा किसी ऑब्जेक्ट से एक reducer का चयन करने के लिए जा रहा है, अंत में वर्ग-आधारित reducers के साथ बसना। हम केवल कैसे के बारे में बात नहीं करने जा रहे हैं, लेकिन इसके बारे में भी क्यों।

यदि आप Redux / NGRX में बहुत अधिक बॉयलरप्लेट के आसपास काम करने में रुचि रखते हैं, तो आप इस लेख को देखना चाहते हैं।

यदि आप पहले से ही एक मानचित्र तकनीक से रिड्यूसर का चयन करने से परिचित हैं, तो क्लास-आधारित रीड्यूसर पर सही कूदने पर विचार करें।

वेनिला स्विच-केस

तो आइए, एसिंक्रोनस रूप से सर्वर पर एक इकाई बनाने के रोजमर्रा के काम पर एक नज़र डालें। इस बार मेरा सुझाव है कि हम यह वर्णन करें कि हम एक नई जेडी कैसे बना सकते हैं।

 const actionTypeJediCreateInit = 'jedi-app/jedi-create-init' const actionTypeJediCreateSuccess = 'jedi-app/jedi-create-success' const actionTypeJediCreateError = 'jedi-app/jedi-create-error' const reducerJediInitialState = { loading: false, // List of our jedi data: [], error: undefined, } const reducerJedi = (state = reducerJediInitialState, action) => { switch (action.type) { case actionTypeJediCreateInit: return { ...state, loading: true, } case actionTypeJediCreateSuccess: return { loading: false, data: [...state.data, action.payload], error: undefined, } case actionTypeJediCreateError: return { ...state, loading: false, error: action.payload, } default: return state } } 

मुझे ईमानदार होने दें, मैंने उत्पादन में इस तरह के रिड्यूसर का उपयोग कभी नहीं किया है। मेरा तर्क तीन गुना है:

• switch-case तनाव के कुछ बिंदुओं का परिचय देता है, टपका हुआ पाइप, जिसे हम कुछ बिंदु पर समय में पैच करना भूल सकते हैं। हम हमेशा break में रखना भूल सकते हैं यदि तत्काल return नहीं करते return , हम हमेशा default जोड़ना भूल सकते हैं, जिसे हमें हर रिड्यूसर में जोड़ना होगा।
• switch-case में स्वयं कुछ बॉयलरप्लेट कोड होता है जो किसी भी संदर्भ को नहीं जोड़ता है।
• switch-case O (n), तरह का है । यह अपने आप में एक ठोस तर्क नहीं है क्योंकि Redux वैसे भी बहुत अच्छा प्रदर्शन नहीं है, लेकिन यह मेरे आंतरिक पूर्णतावादी को पागल बना देता है।

Redux का आधिकारिक दस्तावेज जो तार्किक अगला कदम है, वह यह बताता है कि कुंजी द्वारा किसी ऑब्जेक्ट से रिड्यूसर चुनना है।

कुंजी द्वारा किसी ऑब्जेक्ट से रिड्यूसर का चयन करना

विचार सरल है। प्रत्येक राज्य परिवर्तन राज्य और क्रिया से एक कार्य है और इसके अनुरूप क्रिया प्रकार है। यह देखते हुए कि प्रत्येक क्रिया प्रकार एक स्ट्रिंग है जिसे हम एक ऑब्जेक्ट बना सकते हैं, जहां प्रत्येक कुंजी एक क्रिया प्रकार है और प्रत्येक मान एक फ़ंक्शन है जो राज्य (एक reducer) को बदल देता है। तब हम कुंजी द्वारा उस ऑब्जेक्ट से एक आवश्यक reducer चुन सकते हैं, जो O (1) है, जब हम एक नई कार्रवाई प्राप्त करते हैं।

 const actionTypeJediCreateInit = 'jedi-app/jedi-create-init' const actionTypeJediCreateSuccess = 'jedi-app/jedi-create-success' const actionTypeJediCreateError = 'jedi-app/jedi-create-error' const reducerJediInitialState = { loading: false, data: [], error: undefined, } const reducerJediMap = { [actionTypeJediCreateInit]: (state) => ({ ...state, loading: true, }), [actionTypeJediCreateSuccess]: (state, action) => ({ loading: false, data: [...state.data, action.payload], error: undefined, }), [actionTypeJediCreateError]: (state, action) => ({ ...state, loading: false, error: action.payload, }), } const reducerJedi = (state = reducerJediInitialState, action) => { // Pick a reducer by action type const reducer = reducerJediMap[action.type] if (!reducer) { // Return state unchanged if we did not find a suitable reducer return state } // Run suitable reducer if found one return reducer(state, action) } 

यहाँ ठंडी बात यह है कि reducerJedi अंदर तर्क किसी भी reducer के लिए समान है, जिसका अर्थ है कि हम इसे फिर से उपयोग कर सकते हैं। यहां तक ​​कि एक छोटा पुस्तकालय भी है, जिसे रिड्यूक्स-क्रिएट-रेड्यूसर कहा जाता है, जो वास्तव में ऐसा करता है। यह कोड इस तरह दिखता है:

 import { createReducer } from 'redux-create-reducer' const actionTypeJediCreateInit = 'jedi-app/jedi-create-init' const actionTypeJediCreateSuccess = 'jedi-app/jedi-create-success' const actionTypeJediCreateError = 'jedi-app/jedi-create-error' const reducerJediInitialState = { loading: false, data: [], error: undefined, } const reducerJedi = createReducer(reducerJediInitialState, { [actionTypeJediCreateInit]: (state) => ({ ...state, loading: true, }), [actionTypeJediCreateSuccess]: (state, action) => ({ loading: false, data: [...state.data, action.payload], error: undefined, }), [actionTypeJediCreateError]: (state, action) => ({ ...state, loading: false, error: action.payload, }), }) 

अच्छा और सुंदर, हुह? हालांकि इस सुंदर अभी भी कुछ चेतावनी है:

• जटिल रिड्यूसर्स के मामले में हमें यह बताने के लिए बहुत सारी टिप्पणियां छोड़नी पड़ती हैं कि यह रिड्यूसर क्या और क्यों करता है।
• विशाल reducer के नक्शे को पढ़ना मुश्किल है।
• प्रत्येक रिड्यूसर में केवल एक ही एक्शन टाइप होता है। क्या होगा अगर मैं एक ही reducer को कई कार्यों के लिए चलाना चाहता हूं?

रात के राज्य में क्लास-आधारित रेड्यूसर मेरे प्रकाश का शेड बन गया।

वर्ग-आधारित रेड्यूसर

इस बार मुझे इस दृष्टिकोण के बारे में बताएं:

• क्लास के तरीके हमारे रिड्यूसर होंगे और विधियों में नाम हैं, जो एक उपयोगी मेटा-सूचना है, और हम 90% मामलों में टिप्पणियों को छोड़ सकते हैं।
• कक्षा के तरीकों को सजाया जा सकता है जो क्रियाओं और रेड्यूसर से मेल खाने के लिए एक आसान-से-घोषित घोषणात्मक तरीका है।
• हम अभी भी हे (1) जटिलता के लिए हुड के तहत क्रियाओं के मानचित्र का उपयोग कर सकते हैं।

यदि यह आपके लिए एक उचित सूची की तरह लगता है, तो चलो खुदाई करते हैं!

सबसे पहले, मैं यह परिभाषित करना चाहूंगा कि हम परिणाम के रूप में क्या प्राप्त करना चाहते हैं।

 const actionTypeJediCreateInit = 'jedi-app/jedi-create-init' const actionTypeJediCreateSuccess = 'jedi-app/jedi-create-success' const actionTypeJediCreateError = 'jedi-app/jedi-create-error' class ReducerJedi { // Take a look at "Class field delcaratrions" proposal, which is now at Stage 3. // https://github.com/tc39/proposal-class-fields initialState = { loading: false, data: [], error: undefined, } @Action(actionTypeJediCreateInit) startLoading(state) { return { ...state, loading: true, } } @Action(actionTypeJediCreateSuccess) addNewJedi(state, action) { return { loading: false, data: [...state.data, action.payload], error: undefined, } } @Action(actionTypeJediCreateError) error(state, action) { return { ...state, loading: false, error: action.payload, } } } 

अब जैसा कि हम देखते हैं कि जहां हम चाहते हैं कि हम इसे कदम से कदम मिला सकते हैं।

चरण 1. एक्शन डेकोरेटर।

हम यहां क्या करना चाहते हैं, किसी भी प्रकार की कार्रवाई को स्वीकार करना और उन्हें बाद में उपयोग करने के लिए एक वर्ग विधि के लिए मेटा-सूचना के रूप में संग्रहीत करना है। ऐसा करने के लिए हम रिफ्लेक्ट -मेटाडेटा पॉलीफिल का उपयोग कर सकते हैं , जो रिफ्लेक्ट ऑब्जेक्ट के लिए मेटा-डेटा कार्यक्षमता लाता है। इसके बाद यह डेकोरेटर मेटा-डेटा के रूप में अपने तर्क (एक्शन टाइप) को एक विधि से जोड़ देगा।

 const METADATA_KEY_ACTION = 'reducer-class-action-metadata' export const Action = (...actionTypes) => (target, propertyKey, descriptor) => { Reflect.defineMetadata(METADATA_KEY_ACTION, actionTypes, target, propertyKey) } 

चरण 2. एक reducer वर्ग से एक reducer समारोह बनाना

जैसा कि हम जानते हैं कि प्रत्येक reducer एक शुद्ध कार्य है जो एक राज्य और एक कार्रवाई को स्वीकार करता है और एक नया राज्य देता है। वैसे, क्लास एक फंक्शन है, लेकिन ईएस 6 क्लासेस को new बिना इनवाइट नहीं किया जा सकता है और हमें किसी भी तरीके से क्लास से बाहर एक वास्तविक रेड्यूसर बनाना होगा। इसलिए हमें किसी तरह इसे बदलने की जरूरत है।

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

यहाँ बताया गया है कि हम कक्षा के प्रत्येक तरीके की जाँच कैसे कर सकते हैं।

 const getReducerClassMethodsWthActionTypes = (instance) => { // Get method names from class' prototype const proto = Object.getPrototypeOf(instance) const methodNames = Object.getOwnPropertyNames(proto).filter( (name) => name !== 'constructor', ) // We want to get back a collection with action types and corresponding reducers const res = [] methodNames.forEach((methodName) => { const actionTypes = Reflect.getMetadata( METADATA_KEY_ACTION, instance, methodName, ) // We want to bind each method to class' instance not to lose `this` context const method = instance[methodName].bind(instance) // We might have many action types associated with a reducer actionTypes.forEach((actionType) => res.push({ actionType, method, }), ) }) return res } 

अब हम प्राप्त संग्रह को एक रिड्यूसर मानचित्र में संसाधित करना चाहते हैं।

 const getReducerMap = (methodsWithActionTypes) => methodsWithActionTypes.reduce((reducerMap, { method, actionType }) => { reducerMap[actionType] = method return reducerMap }, {}) 

तो अंतिम समारोह कुछ इस तरह दिख सकता है।

 import { createReducer } from 'redux-create-reducer' const createClassReducer = (ReducerClass) => { const reducerClass = new ReducerClass() const methodsWithActionTypes = getReducerClassMethodsWthActionTypes( reducerClass, ) const reducerMap = getReducerMap(methodsWithActionTypes) const initialState = reducerClass.initialState const reducer = createReducer(initialState, reducerMap) return reducer } 

और हम इसे अपने ReducerJedi वर्ग पर लागू कर सकते हैं।

 const reducerJedi = createClassReducer(ReducerJedi) 

चरण 3. यह सब एक साथ विलय।

 // We move that generic code to a dedicated module import { Action, createClassReducer } from 'utils/reducer-class' const actionTypeJediCreateInit = 'jedi-app/jedi-create-init' const actionTypeJediCreateSuccess = 'jedi-app/jedi-create-success' const actionTypeJediCreateError = 'jedi-app/jedi-create-error' class ReducerJedi { // Take a look at "Class field delcaratrions" proposal, which is now at Stage 3. // https://github.com/tc39/proposal-class-fields initialState = { loading: false, data: [], error: undefined, } @Action(actionTypeJediCreateInit) startLoading(state) { return { ...state, loading: true, } } @Action(actionTypeJediCreateSuccess) addNewJedi(state, action) { return { loading: false, data: [...state.data, action.payload], error: undefined, } } @Action(actionTypeJediCreateError) error(state, action) { return { ...state, loading: false, error: action.payload, } } } export const reducerJedi = createClassReducer(ReducerJedi) 

अगले चरण

यहाँ हम क्या याद किया:

• क्या होगा यदि एक ही क्रिया कई विधियों से मेल खाती है? वर्तमान तर्क इसे संभालता नहीं है।
• हम जोड़ सकते हैं?
• यदि मैं कक्षा-आधारित क्रियाओं का उपयोग करूं तो क्या होगा? मैं एक्शन क्रिएटर नहीं, एक्शन टाइप कैसे पास कर सकता हूं?

अतिरिक्त कोड नमूने और उदाहरणों के साथ यह सब reducer-वर्ग के साथ कवर किया गया है।

मुझे कहना होगा कि रीड्यूसर के लिए कक्षाओं का उपयोग करना एक मूल विचार नहीं है। @amcdnl काफी समय पहले भयानक ngrx- कार्यों के साथ आया था, लेकिन ऐसा लगता है कि वह अब NGXS पर ध्यान केंद्रित कर रहा है , यह उल्लेख करने के लिए नहीं कि मैं कोणीय-विशिष्ट तर्क से अधिक सख्त टाइपिंग और डिकॉप्लिंग चाहता था। यहाँ reducer-class और ngrx-actions के बीच महत्वपूर्ण अंतरों की एक सूची है।

यदि आपको अपने रीड्यूसर के लिए कक्षाओं का उपयोग करने का विचार पसंद है, तो आप अपने एक्शन रचनाकारों के लिए भी ऐसा करना पसंद कर सकते हैं। फ्लक्स-एक्शन-क्लास पर एक नज़र डालें।

उम्मीद है, आपने अपनी परियोजना के लिए कुछ उपयोगी पाया। अपनी प्रतिक्रिया मुझसे संवाद करने के लिए स्वतंत्र महसूस करें! मैं निश्चित रूप से किसी भी आलोचना और सवालों की सराहना करता हूं।