Serializadores y deserializados en React

Qué es

Los serializadores son el proceso de convertir un objeto a un formato estándar como JSON o XML. En cambio, los deserializadores es lo inverso: convertir un JSON o XML y convertir a un objeto original.

Cuando utilizarlos

• Cuando necesitamos inicializar estados en nuestro componentes
• Cuando necesitamos enviar un json al servidor backend 

Como utilizarlos

Consideremos el siguiente ejemplo. Tenemos un componente que recibe información desde el Backend en un formato, mientras tanto, el componente debe convertirlo para poder utilizarlo dentro de su estado. Además, es necesario enviar la información de vuelta con el mismo formato.

1. Creamos funciones de serializar y deserializar

// UserFormUtil.js

// Deserializer: transforma de array de objetos a objeto plano
export const deserializer = (initialValue) => {
  const result = {};
  initialValue?.fields?.forEach(({ key, value }) => {
    result[key] = value;
  });
  return result;
}

// Serializer: transforma de objeto plano a array de objetos
export const serializer = (values) => {
  return {
    fields: Object.entries(values).map(([key, value]) => ({
      key,
      value: typeof value === "string" ? value.trim() : value
    }))
  };
}

2. Usemos las funciones en el componente

// UserForm.js

import React, { useState } from “react”;
import { serializer, deserializer } from ‘UserFormUtil’

function UserForm({ initialValue, onSubmit }) {
  const [values, setValues] = useState(() => deserializer(initialValue));

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(serializer(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input
          type="text"
          name="name"
          value={values.name || ""}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Correo:
        <input
          type="email"
          name="email"
          value={values.email || ""}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default UserForm;


function UserForm({ initialValue, onSubmit }) {
  const [values, setValues] = useState(() => deserializer(initialValue));

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const serializedData = serializer(values);
    onSubmit(serializedData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input
          type="text"
          name="name"
          value={values.name || ""}
          onChange={handleChange}
        />
      </label>
      <label>
        Correo:
        <input
          type="email"
          name="email"
          value={values.email || ""}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default UserForm;

Ejemplo de uso

const initialValue = {
  fields: [
    { key: "name", value: "Ana" },
    { key: "email", value: "[email protected]" }
  ]
};

<UserForm
  initialValue={initialValue}
  onSubmit={(data) => console.log("Enviado al servidor:", data)}
/>

Resultado al enviar la data al backend

{
  fields: [
    { key: "name", value: "Ana" },
    { key: "email", value: "[email protected]" }
  ]
}