How to describe the logic of converting data to the desired view in vuex actions?

Faced with the problem that my actions have become too much inflated in the scope of logic, as it's all right to share:

convertReceivedDataAndHeaders({commit}, response) {

 const {
 head_info: headersInfo, // Pull out table settings (pagination, number of columns, etc.)
 fields: headers, // Pulls the name of columns, type of columns
 rows : data // Pull out the data in the table
 } = response

 commit('setHeadersInfo', headersInfo) // give data from the headers

 let filteredHeadersArray = []
 let howManyGridColumnsToShow = 0 // the Number of columns that should be displayed in the grid (needed for css grid)
 let index = 0
 // Handle headers, that are passed on to the English names as primary keys 
 for (let element in headers) { 
 filteredHeadersArray[index] = {
 'FIELD_NAME' : element.toUpperCase(), // English name (in snake_case) driven to upper case
 'FIELD_CAPTION' : headers[element]['caption'], // Russian name
 'TYPE' : headers[element]['field_type'], // Number data type if it is 1 Number, 2 - String
 'IS_PK' : headers[element]['is_pk'], // If 1, then this column is the primary key, if 0, then no
 'IS_VISIBLE' : headers[element]['is_visible'], // If 1 then display in the grid this column, if 0, then no
}
index++

 // Add schetchik columns you want to show
 headers[element]['is_visible'] == 1 ? howManyGridColumnsToShow++ : 0
}

 // Sort the array of titles so that the first column was always IS_PK
 filteredHeadersArray = filteredHeadersArray.sort((a, b) => {
 return b['IS_PK'] - a['IS_PK']
})


 let filteredDataArray = []
 // The generated table data, calculated starting from the header table
 for (let i = 0; i < filteredHeadersArray.length; i++) {
 // Get the data type for the column
 const typeInColum = filteredHeadersArray[i]['TYPE'] == 1 ? Number : String
 // Get the information whether to show this field or not
 const visible = filteredHeadersArray[i]['IS_VISIBLE']
 // On each iteration we get an array of values in one column of the table (on vertical)
 let dataArray = data[filteredHeadersArray[i]['FIELD_NAME']]

 // If nothing there, then fill it with blank data: the first element (it has always) id give a -1
 // (to by clicking on this field it caused the creation of new fields and not edit), and all the rest empty value
 if (!dataArray) {
 dataArray = i === 0 ? [-1] : [0]
}

 // Split the arrays values, in fact we are from the "vertical arrays" do "horizontal"
 for (let x = 0; x < dataArray.length; x++) {
 // Throws immediately converted to the desired type
 if (i === 0) {
 // On the first iteration of the upper loop we create massive (first column)
 filteredDataArray.push([ { value : typeInColum(dataArray[x]), visible } ])
 } else {
 // On the second iteration of the upper loop we have added to these column values
 filteredDataArray[x].push( { value : typeInColum(dataArray[x]), visible})
}
}
}

 // Additional processing on the text color and the color of backround
 for (let i = 0; i < filteredHeadersArray.length; i++) {
 const fieldName = filteredHeadersArray[i]['FIELD_NAME']
 // Find the needed object which stores data about the color 
 const colorType = fieldName === 'FONT_COLOR' ? 'FC' : fieldName === 'BG_COLOR' ? 'BC' : null

 if (colorType) {
 const dataArray = data[fieldName] // On each iteration we get an array of values in one column of a table

 for (let c = 0; c < dataArray.length; c++) {
 let num = parseInt(dataArray[c]) // Convert first number
 let hex = num.toString(16) // And then to HEX format

 filteredDataArray[c].forEach((item) => {
 if (dataArray[c] == -1) return // break the loop if the value is default
 return item[colorType] = '#' + (hex.length < 2 ? hex + '00000' : 
 hex.length < 3 ? hex + '0000' :
 hex.length < 4 ? hex + '000' :
 hex.length < 5 ? hex + '00' :
 hex.length < 6 ? hex + '0' : hex)
})
}
}
}

 commit('setHeadersAndData', { // Pass the processed data to a state
 gridHeaders : filteredHeadersArray, 
 gridData : filteredDataArray,
howManyGridColumnsToShow
})

 }


It's all one dispatch, he eventually ballooned to a size that is very not cool.

How accurate to describe such a large transformation logic data, to make a bunch dispatch'her or make this logic in a separate file?
April 7th 20 at 15:51
1 answer
April 7th 20 at 15:53
Read about the methodology of refactoring bloated functions https://refactoring.guru/ru/smells/long-method
I'm rather wondering how it globally to refactor my question was just how similar it is correct to do regarding vuex - khalil_Rath commented on April 7th 20 at 15:56
@marjolaine, And it doesn't matter. This is a common feature and refactor it to be exactly the same. There is no any special "chips" that only so you need to do if you work with vuex.
Read the link above. Especially since there there are examples on TypeScript, which is almost the same as JavaScript - fern_Hahn commented on April 7th 20 at 15:59
@gianni_Cro, that is, based on your response projecting vuex, I need to make a bunch in dispatch actions? - khalil_Rath commented on April 7th 20 at 16:02
@marjolaine, If you are in the application somewhere they are needed — Yes. Otherwise (which is true judging by your code) — so use simple functions. To you nobody forbids to import some function from some file and use it inside.
You primarily work with JavaScript. Abstracted from Vuex.
Again. action is a regular function. How would you urifactory JavaScript function? Here and do it. - fern_Hahn commented on April 7th 20 at 16:05

Find more questions by tags Vue.js