Programación Declarativa: Simplificación y Abstracción de Estados

¿Qué es la programación declarativa y cómo se implementa en React?

La programación declarativa se centra en describir "qué" debe hacer el programa en lugar de "cómo" hacerlo. En el contexto de React, esto significa centrarse en el resultado esperado del estado y los efectos secundarios, sin especificar los pasos precisos para alcanzarlos. El objetivo es simplificar la gestión del estado utilizando funciones descriptivas que encapsulan los cambios necesarios.

¿Cómo pasamos de código imperativo a declarativo?

1. Abstractar la lógica: En lugar de actualizar propiedades de estado individuales en múltiples lugares del código, abstraemos estas actualizaciones en funciones descriptivas.
2. Crear métodos actualizadores: Estos métodos, como onConfirm o onError, se utilizan para encapsular lógica específica de actualización de estado.
3. Uso de eventos: Implementamos eventos que disparamos según las acciones del usuario, como escribir o confirmar un código.

const onConfirm = () => {
  setState({
    ...state,
    error: false,
    loading: false,
    confirmed: true
  });
};

const onError = () => {
  setState({
    ...state,
    error: true,
    loading: false
  });
};

¿Cómo mejoramos la legibilidad con funciones específicas?

Al usar funciones que describen claramente la acción que se está llevando a cabo (como onWrite para capturar entradas del usuario), no solo mantenemos el código más legible, sino que también logramos una mayor reutilización del código.

• OnWrite: Esta función captura el valor ingresado por el usuario y lo actualiza en el estado.

const onWrite = (newValue) => {
  setState({
    ...state,
    value: newValue
  });
};

¿Cómo gestionamos actualizaciones de estado más complejas?

Implementamos funciones para procesos más complejos, como comprobaciones o reversiones de acciones, asegurando que las acciones no solo sean descriptivas, sino que también puedan escalar con el crecimiento de la aplicación.

1. OnCheck: Verifica el código ingresado por el usuario.
2. OnReset: Restaura el estado de la aplicación al estado inicial, útil para botar cambios o simular un reinicio.

const onCheck = () => {
  setState({
    ...state,
    loading: true
  });
};

const onReset = () => {
  setState(initialState);
};

¿Cómo se logra un equilibrio entre programación imperativa y declarativa?

No hay un límite claro entre código declarativo e imperativo; es un espectro. En ciertas secciones del código, un enfoque puede inclinarse más hacia un lado del espectro. Cada desarrollador debe determinar cuánto desea comprometerse con cada estilo según las necesidades del proyecto y la claridad del código.

• La clave es saber cuándo abstraer la lógica en funciones y cuándo es mejor mantenerla en línea.
• Aunque el código puede parecer un poco más extenso, la legibilidad y la mantenibilidad permiten que otros desarrolladores comprendan rápidamente la intención detrás de cada acción.

A medida que avances con React, llevar tu enfoque declarativo a nuevas alturas, utilizando herramientas como useReducer, puede maximizar la eficiencia en el manejo del estado. Esto es solo el comienzo del viaje hacia un código más limpio y robusto.