संख्या को कैसे कम करें और प्रतिक्रिया-रिड्यूक्स, रेडक्स-सागा में कोड की पठनीयता को बढ़ाएं

मुझे क्या पसंद नहीं आया

1. घटना कारखानों

   
   

   const actionCreatorFactory = type => payload => ({ type, payload });
   
   export const INITIALIZE = 'INITIALIZE';
   
   export const ON_FIELD_CHANGE = 'ON_FIELD_CHANGE';
   export const onFieldChange = actionCreatorFactory(ON_FIELD_CHANGE);
   
   export const HANDLE_FIELD = 'HANDLE_FIELD';
   export const handleField = actionCreatorFactory(HANDLE_FIELD);
   
   export const GO_TO_NEXT_STEP = 'GO_TO_NEXT_STEP';
   export const goToNextStep = actionCreatorFactory(GO_TO_NEXT_STEP);
   

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

2. कम करने वाली

   
   

   import getInitialState, {
     formDataInitialState as initialState,
   } from '../helpers/initialState';
   import { HANDLE_FIELD_DONE, ON_FIELD_CHANGE, RESET } from '../actionCreators';
   
   export default (state = initialState, { type, payload }) => {
     switch (type) {
       case RESET: {
         return getInitialState().formDataInitialState;
       }
   
       case ON_FIELD_CHANGE: {
         const { name } = payload;
         return {
           ...state,
           [name]: '',
         }
       }
   
       case HANDLE_FIELD_DONE: {
         const { name, value } = payload;
         return {
           ...state,
           [name]: value,
         }
       }
     }
   
     return state;
   };
   

   
   यहां, सामान्य तौर पर, केवल स्विच निर्माण कष्टप्रद है

3. गाथा

   
   

   import { all, put, select, fork, takeEvery } from 'redux-saga/effects';
   import { runServerSideValidation } from '../actionCreators';
   import { HANDLE_FIELD } from '../actionCreators';
   
   function* takeHandleFieldAction() {
     yield takeEvery(HANDLE_FIELD, function*({ payload }) {
       const { validation, formData } = yield select(
         ({ validation, formData }) => ({
           validation: validation[payload.name],
           formData,
         })
       );
   
       const valueFromState = formData[payload.name];
   
       if (payload.value !== valueFromState) {
         const { name, value } = payload;
         const { validator } = validation.serverValidator;
         yield put(
           runServerSideValidation({
             name,
             value,
             validator,
             formData,
           })
         );
       }
     });
   }
   
   export default function* rootSaga() {
     yield all([fork(takeHandleFieldAction())]);
   }
   

   
   सगाओं में, सबसे बड़ी समस्या है पढ़ने में कठिनाई। सिर्फ गाथा को समझने के लिए एक सरसरी निगाह। इसका एक कारण गहरा घोंसला है। आप बेशक गहराई कम करने के लिए श्रमिकों को निकाल सकते हैं, लेकिन फिर अतिरेक बढ़ जाता है।
   
   

   import { all, put, select, fork, takeEvery } from 'redux-saga/effects';
   import { runServerSideValidation } from '../actionCreators';
   import { HANDLE_FIELD } from '../actionCreators';
   
   function* takeHandleFieldWorker({ payload }) {
       const { validation, formData } = yield select(
         ({ validation, formData }) => ({
           validation: validation[payload.name],
           formData,
         })
       );
   
       const valueFromState = formData[payload.name];
   
       if (payload.value !== valueFromState) {
         const { name, value } = payload;
         const { validator } = validation.serverValidator;
         yield put(
           runServerSideValidation({
             name,
             value,
             validator,
             formData,
           })
         );
     }
   }
   
   function* takeHandleFieldWatcher() {
     yield takeEvery(HANDLE_FIELD, takeHandleFieldWorker);
   }
   
   export default function* rootSaga() {
     yield all([fork(takeHandleFieldWatcher())]);
   }
   

   
   ऐसे चेक भी हैं जो या तो घोंसले के शिकार को बढ़ा देंगे, या गाथा से बाहर निकलने के बिंदु जोड़ देंगे, जिससे हमारा कोड बिगड़ जाता है।

मैं इन समस्याओं को कैसे हल करने की कोशिश कर रहा हूं

1. घटना कारखानों

   
   

   import { actionsCreator, payload } from 'sweet-redux-saga';
   
   @actionsCreator()
   class ActionsFactory {
     initialize;
     
     @payload('field', 'value')
     onFieldChange;
     
     @payload('field')
     handleField;
     
     @payload('nextStep')
     goToNextStep;
   }
   

   
   actionsCreator(). , (initialize;/onFieldChange;/handleField;/gpToNextStep;) action creator. , payload(...[fieldNames]). :
   
   

   class ActionsFactory {
     initialize = () => ({
       type: 'INITIALIZE',
       payload: undefined,
     });
   
     onFieldChange = (field, value) => ({
       type: 'ON_FIELD_CHANGE',
       payload: {
         field,
         value,
       },
     });
   
     handleField = field => ({
       type: 'HANDLE_FIELD',
       payload: {
         field,
       },
     });
   
     goToNextStep = nextStep => ({
       type: 'GO_TO_NEXT_STEP',
       payload: {
         nextStep,
       },
     });
   }
   

   
   toString, toPrimitive, valueOf. :
   
   

   const actionsFactory = new ActionsFactory();
   console.log(String(actionsFactory.onFieldChange)); // 'ON_FIELD_CHANGE'
   

2. 
   

   import getInitialState, {
     formDataInitialState as initialState,
   } from '../helpers/initialState';
   import { HANDLE_FIELD_DONE, ON_FIELD_CHANGE, RESET } from '../actionCreators';
   import { reducer } from '../../../leadforms-gen-v2/src/decorators/ReducerDecorator';
   
   @reducer(initialState)
   export class FormDataReducer {
     [RESET]() {
       return getInitialState().formDataInitialState;
     }
   
     [ON_FIELD_CHANGE](state, payload) {
       const { name } = payload;
       return {
         ...state,
         [name]: '',
       };
     }
   
     [HANDLE_FIELD_DONE](state, payload) {
       const { name, value } = payload;
       return {
         ...state,
         [name]: value,
       };
     }
   }
   

   
   reducer([initialState]). , , .
   
   

   function reducer(state = initialState, action) {
     if (!action) {
       return state;
     }
   
     const reducer = instance[action.type];
     if (reducer && typeof reducer === 'function') {
       return reducer(state, action.payload);
     }
   
     return state;
   }
   

3. 
   

   import { all, put, select, } from 'redux-saga/effects';
   import { runServerSideValidation } from '../actionCreators';
   import { HANDLE_FIELD } from '../actionCreators';
   import { sagas, takeEvery, filterActions } from 'sweet-redux-saga';
   
   @sagas()
   class MySagas {
     @takeEvery([HANDLE_FIELD])
     @filterActions(
       ({state, payload }) => state.formData[payload.name] === payload.value
     )
     * takeHandleFieldAction({ payload }) {
       const { validation, formData } = yield select(({ validation, formData }) => ({
         validation: validation[payload.name],
         formData,
       }));
   
       const { name, value } = payload;
       const { validator } = validation.serverValidator;
       yield put(
         runServerSideValidation({
           name,
           value,
           validator,
           formData,
         })
       );
     }
   }
   
   export default function* rootSaga() {
     yield all([
       new MySagas(),
     ]);
   }
   

   
   सगा () एनोटेशन के साथ एक वर्ग बनाएं। कक्षा का एक उदाहरण बनाते समय, हमें एक फंक्शन जनरेटर मिलता है, जो टेकएवर ([... [एक्शनटाइप्स]]) या लेलैस्टेस्ट ([... [एक्शनटाइप्स]] एनोटेशन से अलग थ्रेड में चिह्नित करता है :
   
   

   function* mySagas() {
     yield all([fork(mySagas.takeHandleFieldAction())]);
   }
   

   
   फ़िल्टरएक्शंस ({स्टेट, टाइप, पेलोड}) एनोटेशन का उपयोग खेतों के साथ भी किया जा सकता है , इस मामले में गाथा केवल तभी कहा जाएगा जब फ़ंक्शन सही हो ।

निष्कर्ष