CODEWITHSUNDEEP
javascriptreactjsclassfunctional-programminges6-class
Alejandro A. E. Díaz
Alejandro A. E. Díaz

Reputation: 35

convert javascript es6 class to functional programming style

I have a class that wrote in reactjs, but would like to convert to function using functional programming and not OOP. Anybody tell me how? Follow my class.

import * as h from './hydraulic';

export default class verticalfloculator_diag {
  constructor (width, length, depth, npantalla, espaciamiento, espesor, pasos) {
    this.detention_time = 0;
    this.ancho = width
    this.largo = length
    this.profundidad = depth
    this.npantalla = npantalla
    this.espaciamiento_pantallas = espaciamiento
    this.espesor_pantallas = espesor
    this.alto_pasos = pasos
    this.area_entrepantallas = this.espaciamiento_pantallas * this.ancho
    this.volumen = this.ancho * this.profundidad * this.largo
    this.radiohidraulico = h.radio_hydraulico(this.area_entrepantallas, 2 * (this.ancho + this.espaciamiento_pantallas))
    this.anchohueco = 0.3
    this.altohueco = 0.2
  }


  Q = (q) => h.q_m3s(q);
  tiempo = (q) => this.volumen / this.Q(q);  // en m3
  velocidad_canales = (q) => h.velocity(this.Q(q), (this.area_entrepantallas));
  velocidad_pasos = (q) => h.velocity(this.Q(q), (this.alto_pasos * this.ancho));
  velocidad_huecos = (q) => h.velocity(this.Q(q), (this.altohueco * this.anchohueco));
  perdidascanales = (q) => h.perdidas_canales(0.013, this.velocidad_canales(this.Q(q)), this.radiohidraulico);
  perdidasenvueltas = (q) => ((this.npantalla + 1) * Math.pow (this.velocidad_canales(q),2) + (this.npantalla) * Math.pow(this.velocidad_pasos(q),2))/2/9.81
  perdidasenhuecos = (q) => Math.pow(this.velocidad_huecos(q),2)/2/9.81
  perdidastotales = (q) => this.perdidascanales(q) + this.perdidasenvueltas(q) + this.perdidasenhuecos(q)

}

Upvotes: 2

Views: 6462

Answers (3)

Ben Hart
Ben Hart

Reputation: 167

You could implement redux and react-redux packages and use stateless functional components.

redux allows you to inject all your state and methods as props, so the only way you would need a full class component would be for a lifecycle method.

Upvotes: 0

Duncan Thacker
Duncan Thacker

Reputation: 5188

An alternate approach is to make a "pure data" flocculator object:

const myFlocculator = {
    volumen: 10,
    ancho: 50
    //etc
};

and pass it into each function, which separates your data model from your business logic in a nice FP style:

export const tiempo = (floculator, q) => floculator.volumen / Q(q);

which you call like this:

const t = tiempo( myFlocculator, q );

So now you can create any number of functions which understand how to work with flocculator data, without binding them up in a class. If you want you can even have a constructor-like function:

function createFloculator( width, length, depth, npantalla, espaciamiento, espesor, pasos) {
   return {
      ancho: width,
      large: length, 
      //etc
   };
}

Upvotes: 5

Duncan Thacker
Duncan Thacker

Reputation: 5188

The easiest way is to just export the individual functions directly by name, and give them more parameters to replace the stored ones from the class. E.g.

export const Q = q => h.q_m3s(q); // or possibly even just Q = h.q_m3s
export const tiempo = (q, volumen) => volumen / Q(q);

Upvotes: 1

Related Questions