![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2018\/09\/Redux-Form-pon-orden-a-tus-formularios.jpg\")
<\/p>\n<\/p>\n
La utilizaci\u00f3n de una u otra librer\u00eda para la parte del Front-End<\/strong> de los desarrollos que hemos implementado, es algo que decide cada desarrollador. Esto nos proporciona una gran libertad, pero tambi\u00e9n una gran responsabilidad.\u00a0La elecci\u00f3n de una mala librer\u00eda es problema del desarrollador y por lo tanto, los errores o bugs que pueda tener, ser\u00e1n problema de quien utilice esta librer\u00eda. En este art\u00edculo vamos a ver si en nuestros desarrollos deber\u00edamos incluir Redux Form<\/strong>, cu\u00e1les son sus pros y sus contras.<\/p>\n <\/p>\n Desde hace m\u00e1s de un a\u00f1o seleccionamos ReactJS<\/strong> como la librer\u00eda utilizada para la parte Front-End de los desarrollos que hemos implementado. Una de sus principales ventajas es la posibilidad de elegir cada parte de nuestro desarrollo, ReactJS se encarga solo del renderizado del HTML.<\/p>\n Hace una \u00fanica cosa y la hace muy bien. Junto con ReactJS hay una serie de librer\u00edas que complementan todo lo que nos proporciona un Framework Javascript: react-redux, react-router, react-thunks…<\/p>\n Partiendo de est\u00e1 introducci\u00f3n, en nuestros desarrollos est\u00e1bamos teniendo un problema a nivel de mantenimiento del c\u00f3digo en todos los componentes React que se comportan como Formularios. Para implementar este componente, tenemos una serie de elementos en su estado que hay que controlar. Todo esto, hace que cuando el formulario tiene muchos campos y se requieren una serie de validaciones, el n\u00famero de l\u00edneas crece exponencialmente.<\/p>\n Para intentar solucionar este problema, nos planteamos:<\/p>\n Descartamos incorporar una librer\u00eda de validaciones porque supon\u00eda a\u00f1adir una dependencia extra, y no nos terminaba de convencer su funcionamiento.<\/p>\n La segunda opci\u00f3n (crear componente con dicha funcionalidad), nos pareci\u00f3 una muy buena opci\u00f3n debido a que nosotros ten\u00edamos todo el control del desarrollo, pero parec\u00eda que est\u00e1bamos reconstruyendo la rueda y a\u00f1adiendo una dificultad extra a nuestros desarrollos.<\/p>\n En medio de esta situaci\u00f3n, probamos Redux-Form…pero antes de empezar a hablar sobre esta librer\u00eda vamos a hacer algunas aclaraciones<\/strong>:<\/p>\n El gran beneficio que nos reporta esta librer\u00eda, es que pone orden al c\u00f3digo<\/strong> para utilizar en los formularios.\u00a0 Por un lado tenemos un componente Formulario<\/em> que es el que vinculamos con nuestra store. Por otro lado tenemos una serie de componente para poder tener cada campo con una validaci\u00f3n. Y por si fuera poco, todas estas reglas se pueden compartir entre los mismos campos, por ejemplo tenemos una funci\u00f3n que nos valide un DNI y esta regla la podemos utilizar en m\u00e1s campos.<\/p>\n El Flujo de nuestra aplicaci\u00f3n quedar\u00eda de la siguiente forma:<\/p>\n Para empezar, en\u00a0 nuestra soluci\u00f3n incorporaremos las librer\u00eda redux-form y sus tipos correspondientes<\/strong> (debido que durante el desarrollo hemos optado por usar\u00a0 Typescript en lugar de Javascript directamente). Para ello, en el package.json de nuestro proyecto a\u00f1adiremos estas dependencias:<\/p>\n Otra forma de incorporar estas dependencias es\u00a0 instalando estos paquetes con npm y la opcion –save-dev.<\/p>\n Una vez tenemos la soluci\u00f3n lista,\u00a0 creamos nuestro formulario<\/strong>. En primer lugar, vamos a crearnos un componente personalizado extendiendo la funcionalidad Field<\/em> que nos proporciona la librer\u00eda en el que vamos a configurar, por un lado las reglas de validaci\u00f3n que va a tener el campo, la etiqueta, el mensaje de error de validaci\u00f3n. Un ejemplo ser\u00eda el siguiente c\u00f3digo:<\/p>\n Con este campo personalizado y con estas reglas de validaci\u00f3n, ya podemos empezar a crear el formulario. Para ello lo que vamos a utilizar es el componente Field, <\/em>\u00a0que se comportar\u00e1 seg\u00fan nuestros criterios, es decir: qu\u00e9 reglas de validaci\u00f3n van a tener, cu\u00e1l es su dise\u00f1o, etc.<\/p>\n Por otro lado en este componente tambi\u00e9n vamos a ver cual es el funcionamiento que queremos hacer una vez nuestro formulario sea v\u00e1lido. Un ejemplo de un formulario de suscripci\u00f3n a un rss podr\u00eda ser de la siguiente forma:<\/p>\n Una vez ya tenemos el formulario, tenemos que registrarlo en la librer\u00eda para que se pueda utilizar como un elemento m\u00e1s dentro del flujo de la aplicaci\u00f3n.<\/p>\n Como ya hemos comentado, el nombre de form<\/em> debe de ser \u00fanico, es decir, si damos de alta dos formularios con el mismo identificador, la librer\u00eda no funciona.<\/p>\n Uno de los aspectos que he esbozado al inicio del art\u00edculo, es que Redux-Form hace uso del patr\u00f3n hight order component<\/em>. Esto lo podemos comprobar porque ahora mismo, hemos creado un componente y \u00e9ste va a estar incluido en un componente superior desde el cual se le van a pasar las props (en forma de Matriuska). Por lo que en nuestro desarrollo lo que vamos a realizar es crearnos un componente principal que ser\u00e1 el encargado de pasarle los m\u00e9todos de ejecuci\u00f3n al hijo. Un ejemplo del anterior ser\u00eda el siguiente c\u00f3digo:<\/p>\n Por \u00faltimo para poder incluir Redux-Form en el contexto de Redux lo que tenemos que hacer es incluirlo dentro de los Reducers correspondiente. La librer\u00eda ya trae de serie un reducer \u00abformReducer\u00bb que es el que vamos a utilizar.<\/p>\n La librer\u00eda aun tiene mucha m\u00e1s funcionalidad avanzada<\/strong>, por ejemplo puede hacernos agrupaciones de campos para aplicar validaciones. Tambi\u00e9n tiene funcionalidad para poder implementar un Wizard<\/em>. Con esta herramienta hace todo de una forma m\u00e1s sencilla.<\/p>\n Redux Form<\/strong> es una librer\u00eda que nos facilita la posibilidad de establecer el orden de nuestra soluci\u00f3n para todos los componentes que se comporten de tipo formulario<\/em>. Esto hace mucho m\u00e1s f\u00e1cil su posterior mantenimiento y evoluci\u00f3n.<\/p>\n Otra de las grandes ventajas es que lo tenemos incorporado a Redux, lo que hace que todo siga el mismo patr\u00f3n Flux. En definitiva, a la hora de incorporar librer\u00edas de terceros siempre hay que pensarlo muy detenidamente porque nos puede ocasionar problemas futuros. Sin embargo, Redux Form es una librer\u00eda bastante buena que nos aporta numerosos beneficios y en el caso de formularios complejos, nos facilita mucho la vida\u00a0\ud83d\ude0a<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" La utilizaci\u00f3n de una u otra librer\u00eda para la parte del Front-End de los desarrollos que hemos implementado, es algo que decide cada desarrollador. Esto nos proporciona una gran libertad, pero tambi\u00e9n una gran responsabilidad.\u00a0La elecci\u00f3n de una mala librer\u00eda … Continue reading Qu\u00e9 es Redux-Form<\/strong><\/h2>\n
\n
Consideraciones previas<\/strong><\/h2>\n
\n
Beneficios<\/strong><\/h2>\n
![\"redux](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2018\/09\/redux-form-300x286.png\")
<\/p>\nShow me the code, talk (write) is cheap<\/strong><\/h2>\n
\r\n @types\/redux-form": "^7.4.6",\r\n redux-form": "^7.4.2"\r\n<\/pre>\n
\r\nconst email = (value:any) =>\r\n value && !\/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$\/i.test(value)\r\n ? 'Invalid email address'\r\n : undefined\r\nconst alphaNumeric = (value:any) =>\r\n value && \/[^a-zA-Z0-9 ]\/i.test(value)\r\n ? 'Only alphanumeric characters'\r\n : undefined\r\nexport const phoneNumber = (value:any) =>\r\n value && !\/^(0|[1-9][0-9]{9})$\/i.test(value)\r\n ? 'Invalid phone number, must be 10 digits'\r\n : undefined\r\n\r\nconst renderField = (props:any) => (\r\n <div className="col-md-3 col-sm-3 aitscontactw3l-grid aitscontactw3l-grid-1">\r\n <label className="fill fill-top">{props.label}<\/label>\r\n <input className="fill" {...props.input} placeholder={props.label} type={props.type} \/>\r\n {props.touched &&\r\n ((props.error && <span>{props.error}<\/span>) ||\r\n (props.warning && <span>{props.warning}<\/span>))}\r\n <\/div>\r\n<\/pre>\n\r\nonst ContactForm = (props:any) => {\r\n const { handleSubmit } = props\r\n return (\r\n <div className="aitscontactw3l" id="aitscontactw3l">\r\n <div className="container">\r\n <h3>Contacto<\/h3>\r\n <form onSubmit={handleSubmit}>\r\n <Field \r\n type="email"\r\n name="Email" \r\n component={renderField} \r\n label="Correo electronico"\r\n validate={[required, email]}\r\n warn={alphaNumeric} \/>\r\n <input className="submit" type="submit" value="Enviar" \/>\r\n <div className="clearfix"\/>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n )\r\n<\/pre>\n\r\nexport const Form = reduxForm({\r\n \/\/ a unique name for the form\r\n form: 'contact'\r\n})(ContactForm)\r\n<\/pre>\n\r\nexport class Contact extends React.Component<{}, {}> {\r\n public submit = (values:any) => {\r\n console.log(values)\r\n }\r\n public render() {\r\n return <Form onSubmit={this.submit} \/>\r\n }\r\n}\r\n<\/pre>\n\r\nimport { reducer as formReducer } from 'redux-form'\r\nexport interface IStateReducer {\r\ncarrousel:ICarrouselItem[],\r\nform:any\r\n}\r\n\r\nexport const state = combineReducers<IStateReducer>({\r\n carrousel: carrouselReducer,\r\n form: formReducer\r\n});\r\n<\/pre>\n\u00bfA\u00fan hay m\u00e1s?<\/strong><\/h2>\n
Resumen <\/strong><\/h2>\n