Formularios y peticiones HTTP

Una parte fundamental de cualquier aplicación web es la interacción con el usuario. En este sentido, los formularios juegan un papel importante, ya que permiten a los usuarios enviar información a un servidor.

De igual manera, debemos abordar como se manejarán las peticiónes HTTP mediante diferentes métodos, como GET, POST, PUT, DELETE, entre otros.

Formularios

En materias anteriores, se abordó el uso de formularios en HTML. Sin embargo, como sabemos, React establece ciertas convenciones y prácticas recomendadas cuando trabajamos con jsx, lo cual incluye el manejo de formularios.

En React, los formularios se comportan de manera diferente a como lo hacen en HTML. En lugar de que el DOM maneje el estado de los elementos de formulario, React puede manejar estados para cada campo de formulario o, como veremos más adelante, mediante referencias.

Implementación de formularios

En HTML, el envío de un formulario se realiza mediante la propiedad action de un elemento <form>.

<form action="/submit" method="post">
  <input type="text" name="username" />
  <button type="submit">Enviar</button>
</form>

Además, el uso de formularios ofrece ciertos mecanismos de accesibilidad:

• Un elemento <button> dentro de un formulario de tipo submit triggerea el envío del formulario al igual que lo haría la propiedad action. Cabe destacar que, si no se indica el tipo de botón, este se considera de tipo submit por defecto.
• Un campo de texto <input> dentro de un formulario triggerea el envío del formulario al presionar la tecla Enter.

En React, el envío de formularios se maneja de manera diferente. En lugar de enviar el formulario mediante la propiedad action, se puede manejar el envío de formularios mediante el evento onSubmit del elemento <form>.

function MyForm() {
  function handleSubmit(event) {
    console.log("Formulario enviado");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Enviar</button>
    </form>
  );
}

Otro aspecto a tener en cuenta es que, los formularios tienen un comportamiento por defecto que recarga la página al enviar el formulario. Si este comportamiento no es deseado, se puede prevenir mediante el método preventDefault del evento.

function MyForm() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log("Formulario enviado");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Enviar</button>
    </form>
  );
}

Estado de los formularios

En React, los formularios pueden manejar su estado mediante el uso de hooks. Para ello, se puede utilizar el hook useState para definir el estado de los campos de formulario.

function MyForm() {
  const [username, setUsername] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    console.log(username);
  }

  function handleChange(event) {
    setUsername(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
        <label for="username">Nombre de usuario:</label>
        <input
            type="text"
            id="username"
            name="username"
            value={username}
            onChange={handleChange} />
        <button type="submit">Enviar</button>
    </form>
  );
}

Si optamos por esta forma de manejar el estado de los formularios, será necesario definir un manejador de eventos para cada campo de formulario. Este manejador de eventos se encargará de actualizar el estado del campo de formulario cada vez que se modifique su valor. Como podemos observar en el ejemplo anterior, el manejador de eventos handleChange se encarga de actualizar el estado del campo de texto username mediante el evento onChange.

Como consideraciones adicionales, es importante tener en cuenta que:

• El atributo value del campo de formulario se utiliza para establecer el valor del campo de formulario.
• El atributo onChange del campo de formulario se utiliza para establecer el manejador de eventos que se ejecutará cada vez que el valor del campo de formulario cambie.
• El atributo htmlFor del elemento <label> se utiliza para asociar el texto del label con el campo de formulario.
• El atributo id del campo de formulario se utiliza para asociar el campo de formulario con el label.
• Podemos establecer un valor por defecto para un campo de formulario mediante el atributo defaultValue.
• Los elementos <select> y <textarea> también pueden manejar su estado de la misma manera que los campos de texto.
  • Para los elementos <select>, el atributo value se utiliza para establecer el valor seleccionado. Por supuesto, este valor debe coincidir con el valor de uno de los elementos <option> asociados.
  • Para los elementos <textarea>, el atributo value se utiliza para establecer el valor del campo de texto.

Envío de formularios

Una vez que se ha definido el estado de los campos de formulario y se ha establecido el manejador de eventos para el envío del formulario, es posible enviar el formulario mediante una petición HTTP.

Actualmente, existen diferentes formas de realizar una petición HTTP, mediante la función fetch, la librería axios, incluso existen hooks dentro de React que estan diseñados específicamente para esto, como useFormStatus de react-dom. No obstante, en esta materia hemos enfatizado el análisis de todos estos mecanismos, por lo cual buscaremos realizar una implementación propia.

Con este fin, volveremos a utilizar el hook personalizado useFetch que hemos estado desarrollando recientemente.

import { useEffect, useReducer } from "react";

const ACTIONS = {
    FETCH_INIT: "FETCH_INIT",
    FETCH_SUCCESS: "FETCH_SUCCESS",
    FETCH_FAILURE: "FETCH_FAILURE",
};

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.FETCH_INIT:
            return {
                isError: false,
                isLoading: true,
            };
        case ACTIONS.FETCH_SUCCESS:
            return {
                data: action.payload.data,
                isError: false,
                isLoading: false,
            };
        case ACTIONS.FETCH_FAILURE:
            return {
                isError: true,
                isLoading: false,
            };
        default:
            return state;
    }
}

function useFetch(url, options = {}) {
    const [state, dispatch] = useReducer(reducer, {
        data: null,
        isError: false,
        isLoading: true,
    });

    useEffect(() => {
        dispatch({ type: ACTIONS.FETCH_INIT });

        fetch(url, { ...options })
            .then((response) => {
                if (response.ok) {
                    return response.json();
                }
                throw Error("Error al relizar la petición");
            })
            .then((data) => {
                dispatch({ type: ACTIONS.FETCH_SUCCESS, payload: { data } });
            })
            .catch((e) => {
                dispatch({ type: ACTIONS.FETCH_FAILURE });
            });
    }, [url]);

    return state;
}

export default useFetch;

Hasta el momento, hemos empleado el hook useFetch únicamente para realizar peticiones GET. Sin embargo, es posible extender su funcionalidad para realizar peticiones POST, PUT, DELETE, entre otras.

Adicionalmente, es importante tener en cuenta que, al utilizar el hook useFetch este ejecuta la petición HTTP cada vez que el componente que lo contiene se monta o actualiza. Este comportamiento puede tener un impacto negativo en el rendimiento de la aplicación y, particularmente en el caso de los formularios, puede resultar en un envío de formulario no deseado.

Con esto en mente, buscaremos modificar el hook useFetch para que la petición HTTP se realice condicionalmente. Para ello, analizaremos diferentes estrategias:

Emplear un trigger

En esta estrategia, se empleará un estado adicional para controlar si se debe realizar la petición HTTP. No obstante, el estado debe ser proporcionado por el componente que contiene el formulario mediante un prop.

import { useEffect, useReducer } from "react";

const ACTIONS = {
    FETCH_INIT: "FETCH_INIT",
    FETCH_SUCCESS: "FETCH_SUCCESS",
    FETCH_FAILURE: "FETCH_FAILURE",
};

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.FETCH_INIT:
            return {
                isError: false,
                isLoading: true,
            };
        case ACTIONS.FETCH_SUCCESS:
            return {
                data: action.payload.data,
                isError: false,
                isLoading: false,
            };
        case ACTIONS.FETCH_FAILURE:
            return {
                isError: true,
                isLoading: false,
            };
        default:
            return state;
    }
}

function useFetch(url, options = {}, trigger = true) {
    const [state, dispatch] = useReducer(reducer, {
        data: null,
        isError: false,
        isLoading: true,
    });

    useEffect(() => {
        if (trigger) {
            dispatch({ type: ACTIONS.FETCH_INIT });

            fetch(url, { ...options })
                .then((response) => {
                    if (response.ok) {
                        return response.json();
                    }
                    throw Error("Error al relizar la petición");
                })
                .then((data) => {
                    dispatch({
                        type: ACTIONS.FETCH_SUCCESS,
                        payload: { data },
                    });
                })
                .catch((e) => {
                    dispatch({ type: ACTIONS.FETCH_FAILURE });
                });
        }
    }, [url, trigger]);

    return state;
}

export default useFetch;

Mediante una sentencia condicional, se evalúa si el trigger es verdadero. En caso afirmativo, se ejecuta la petición HTTP. De lo contrario, la petición no se realiza.

Emplear callbacks

En esta estrategia, se empleará un callback para realizar la petición HTTP.

Por este motivo, el hook useFetch delegará la responsabilidad de iniciar la petición al componente que contiene el formulario.

Para esto, se modificará el hook useFetch para que retorne una función que permita realizar la petición HTTP, además del estado de la petición.

import { useReducer } from "react";

const ACTIONS = {
    FETCH_INIT: "FETCH_INIT",
    FETCH_SUCCESS: "FETCH_SUCCESS",
    FETCH_FAILURE: "FETCH_FAILURE",
};

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.FETCH_INIT:
            return {
                isError: false,
                isLoading: true,
            };
        case ACTIONS.FETCH_SUCCESS:
            return {
                data: action.payload.data,
                isError: false,
                isLoading: false,
            };
        case ACTIONS.FETCH_FAILURE:
            return {
                isError: true,
                isLoading: false,
            };
        default:
            return state;
    }
}

function useFetch(url, options = {}) {
    const [state, dispatch] = useReducer(reducer, {
        data: null,
        isError: false,
        isLoading: true,
    });

    const doFetch = (newOptions) => {
        dispatch({ type: ACTIONS.FETCH_INIT });

        fetch(url, { ...options, ...newOptions })
            .then((response) => {
                if (response.ok) {
                    return response.json();
                }
                throw Error("Error al relizar la petición");
            })
            .then((data) => {
                dispatch({
                    type: ACTIONS.FETCH_SUCCESS,
                    payload: { data },
                });
            })
            .catch((e) => {
                dispatch({ type: ACTIONS.FETCH_FAILURE });
            });
    };

    return [state, doFetch];
}

export default useFetch;

Bibliografía

• React API Reference - Forms