Обработка нескольких входов в реакторе - PullRequest
Новая
       33

Обработка нескольких входов в реакторе

0 голосов
/ 22 января 2020

Я стажер в реактивном шаблоне и пытаюсь найти лучший рефакторинговый подход к обработке множественных входов, аналогичный моему предыдущему обучающему проекту, функции 'onChange' с использованием setState, в котором не реализована избыточность. 

onChange=(event)=>{        
        await this.setState({
            [event.target.name]: event.target.value                     
        })
    }

Фрагмент моего текущего подхода в реактивном шаблоне ниже:

action. js

export function getSupplierId(supplierId) {
  return {
    type: GET_SUPPLIERID,
    supplierId,
  }
}

export function getModelId(modelId) {
  return {
    type: GET_MODELID,
    modelId,
  }
}

export function getProcessorId(processorId) {
  return{
    type: GET_PROCESSORID,
    processorId,
  }
}

Редуктор. js

const assetHomePageReducer = (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {          
      case GET_SUPPLIERID:
        draft.supplierId = parseInt(action.supplierId) ;
        console.log('Supplier: '+ action.supplierId)
        break;
      case GET_PROCESSORID:
        draft.processorId = parseInt(action.processorId);
        console.log('Processor: '+ action.processorId)
        break;
      case GET_MODELID:
        draft.modelId = action.modelId;
        console.log('Model: '+ action.modelId)
        break;
      case GET_MEMORYID:
        draft.memoryId = action.memoryId;
        console.log('Memory: '+ action.memoryId)
        break;
    }
  });

селектор. js

const makeSelecSupplierId = () =>
  createSelector(
    selectAssetHomePageDomain,
    assetHomeModalState => assetHomeModalState.supplierId
  )

const makeSelectModelId = () =>
  createSelector(
    selectAssetHomePageDomain,
    assetHomeModalState => assetHomeModalState.modelId
  )
  const makeSelectProcessorId = () =>
  createSelector(
    selectAssetHomePageDomain,
    assetHomeModalState => assetHomeModalState.processorId
  )
  const makeSelectMemorylId = () =>
  createSelector(
    selectAssetHomePageDomain,
    assetHomeModalState => assetHomeModalState.memoryId
  )

index. js

function mapDispatchToProps(dispatch) {    
  return {     
    OnChangeSupplierId: event => {
        let index = event.target.selectedIndex;
        let element = event.target.childNodes[index]
        let optionID =  element.getAttribute('id')
      dispatch(getSupplierId(optionID))},
    OnChangeProcessorId:  event => {
        let index = event.target.selectedIndex;
        let element = event.target.childNodes[index]
        let optionID =  element.getAttribute('id')
      dispatch(getProcessorId(optionID))},
  };
}

Каждый вход имеет свою функцию и делает мои коды длинными.

...