hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

Reduce para implementar pipping

100 palabras
1 minutos
July 26, 2020
blogjavascript

Por pipping() se entiende una manera de concatenar m茅todos que nos permite ser m谩s declarativos y programar m谩s funcionalmente (huyendo de la orientaci贸n a objetos)

  1. Utilizando reduce para piping

Utilizando reduce para piping

El reduce no deja de ser un superMap, un superForEach o un superFilter (aqu铆 tienes la entrada donde te lo explico)

Pero qu茅 pasa cuando utilizamos el reduce para iterar un conjunto de funciones?

Pues que podemos implementar el pipping

Ejemplo: qu茅 pasa si queremos aplicar a una cadena de texto un tratamiento concreto

js
// funciones gen茅ricas
const sanitize = str => str.replace(/[^a-zA-Z ]/g, '')
const addParagraph = str => '<p>' + str + '</p>'
const addTitle = str => '<h1>MY VERY SPECIAL TITLE</h1>' + str
// el texto que recibir铆a de un formulario
const data = 'this is my fantastic text that here and there and blah with <a href="">a forbidden link!!</a>'
const prepare = [sanitize, addParagraph, addTitle]
// mi resultado final (opci贸n 1)
const opcion1_1 = sanitize(data)
const opcion1_2 = addParagraph(opcion1_1)
const opcion1_3 = addTitle(opcion1_2)
console.log(opcion1_1) // this is my fantastic text that here and there and blah with a hrefa forbidden linka
console.log(opcion1_2) // <p>this is my fantastic text that here and there and blah with a hrefa forbidden linka</p>
console.log(opcion1_3) // <h1>MY VERY SPECIAL TITLE</h1><p>this is my fantastic text that here and there and blah with a hrefa forbidden linka</p>
// mi resultado final (opci贸n 2)
const opcion2 = addTitle(addParagraph(sanitize(data)))
console.log(opcion2) // <h1>MY VERY SPECIAL TITLE</h1><p>this is my fantastic text that here and there and blah with a hrefa forbidden linka</p>
Ver en CodeSandBox

La opci贸n 1 es algo desastre, y la opci贸n 2 es simplemente el infierno

Siempre podr铆amos utilizar una variable let pero claro, estar铆amos mutando esa variable y esto va en contra de los principios de la programaci贸n funcional (porque si algo muta, nos puede traer problemas en el futuro, y m谩s en React donde las cosas van rerenderiz谩ndose cada dos por tres)

La soluci贸n?

Utilizar reduce

js
// funciones gen茅ricas
const sanitize = str => str.replace(/[^a-zA-Z ]/g, '')
const addParagraph = str => '<p>' + str + '</p>'
const addTitle = str => '<h1>MY VERY SPECIAL TITLE</h1>' + str
// el texto que recibir铆a de un formulario
const data = 'this is my fantastic text that here and there and blah with <a href="">a forbidden link!!</a>'
// funciones que quiero aplicar en un orden espec铆fico
const prepare = [sanitize, addParagraph, addTitle]
// el texto despu茅s de aplicarle mi tratamiento
const myFinalString = prepare.reduce((final, metodo) => metodo(final), data)
console.log(myFinalString)
// <h1>MY VERY SPECIAL TITLE</h1><p>this is my fantastic text that here and there and blah with a hrefa forbidden linka</p>
Ver en CodeSandBox

Super elegante, y a esto se le llama hacer una pipe (una tuber铆a)

Pero sin duda cada vez que aparece la palabra reduce tenemos que hacer un esfuerzo para leer y entender lo que hace esa funci贸n

La soluci贸n?

Redefinir la funci贸n anterior en una funci贸n que llamaremos pipe

js
// funci贸n pipe
const pipe = fs => x => fs.reduce((v, f) => f(v), x);
// funciones gen茅ricas
const sanitize = str => str.replace(/[^a-zA-Z ]/g, '')
const addParagraph = str => '<p>' + str + '</p>'
const addTitle = str => '<h1>MY VERY SPECIAL TITLE</h1>' + str
// el texto que recibir铆a de un formulario
const data = 'this is my fantastic text that here and there and blah with <a href="">a forbidden link!!</a>'
// funciones que quiero aplicar en un orden espec铆fico
const prepare = [sanitize, addParagraph, addTitle]
// el texto despu茅s de aplicarle mi tratamiento
const myFinalString = pipe(prepare)(data)
console.log(myFinalString)
// <h1>MY VERY SPECIAL TITLE</h1><p>this is my fantastic text that here and there and blah with a hrefa forbidden linka</p>
Ver en CodeSandBox

Tenemos lo mismo, pero de una forma mucho m谩s legible

M谩s informaci贸n, en

馃檵鈥嶁檪锔

Qu茅 tal la entrada?

馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado dame las gracias por ejemplo por twitter con este enlace 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]