How to reduce the number and increase the readability of code in react-redux, redux-saga

What didn’t suit me

1. Event factories

   
   

   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);
   

   
   As such, several things confuse me:
   
   - a description of the types of events. In this example, you can certainly do without constant, but still have to pass its type in the factory, which will be identical to the name of the created events in camel ( camelCase ) notification.
   
   - if you forgot the payload structure , to recall it, you need to go to reducer / saga , where this event is used, and see what needs to be transferred there
   

2. Reducers

   
   

   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;
   };
   

   
   Here, in general, only the use of the switch construction is annoying

3. Sagas

   
   

   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())]);
   }
   

   
   In sagas, the biggest problem is the difficulty of reading. Just a cursory glance to understand what makes the saga difficult. One reason for this is deep nesting. You can of course take out the workers to reduce the depth, but then the redundancy increases.
   
   

   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())]);
   }
   

   
   There are also checks that will either increase nesting, or add exit points from the saga, which worsens our code.

How am I trying to solve these problems

1. Event factories

   
   

   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(),
     ]);
   }
   

   
   create a class with sagas () annotation. When creating an instance of the class, we get a function generator that calls all the fields of the class marked with takeEvery ([... [actionTypes]]) or takeLatest ([... [actionTypes]] annotations in a separate thread:
   
   

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

   
   filterActions ({state, type, payload}) annotation can also be used with fields , in this case the saga will be called only if the function returns true .

Conclusion