Flux: Manteniendo el control del flujo en el cambio de un estado (React)

Imagina estar en una escena de una película de Marvel, justo en el momento en que Bruce Banner se transforma en Hulk. La transformación es un proceso que sigue un flujo claro y unidireccional: algo provoca la transformación, Bruce cambia a Hulk, y luego se desata el caos o se salva el día, dependiendo de la situación.

Ahora, usemos este momento para explicar cómo funciona el concepto de Flux en React, manteniendo ese flujo de transformación de Hulk bajo control, asegurándonos de que cada paso siga un camino claro y predecible.

¿Qué es Flux?

Flux es una arquitectura que asegura que los datos en una aplicación de React fluyan en una sola dirección, desde el inicio de un cambio hasta que ese cambio se refleja en la interfaz de usuario. Es como seguir la secuencia de transformación de Bruce a Hulk: siempre comienza con un detonante, sigue un proceso, y termina con un resultado visible (Hulk destrozando cosas o salvando el día).

El flujo de transformación de Hulk como ejemplo

Vamos a imaginar que tienes una aplicación que simula la transformación de Bruce Banner en Hulk. Al igual que en las películas, la transformación sigue una secuencia de eventos muy clara. Este es el flujo:

• Un detonante (Action Creator): Algo provoca la transformación, ya sea un ataque, una situación de peligro, o simplemente que alguien se pasa de listo con Bruce. En términos de Flux, esto es una acción que genera un cambio en el estado de la aplicación. En nuestro caso, la acción sería "Transformar a Bruce en Hulk".

• El comunicador del cambio (Dispatcher): Este es el intermediario que toma esa acción de transformación y la envía a la parte de la aplicación encargada de manejar ese estado (el Store). El dispatcher es como el detonante interno de Bruce, que envía la señal para que la transformación comience.

• El estado cambia (Store): Aquí es donde ocurre la magia. El store en Flux es el lugar donde se guarda el estado actual de la aplicación, en este caso, el estado de Bruce Banner/Hulk. Una vez que el dispatcher recibe la orden, el store actualiza el estado de Bruce de "Banner" a "Hulk", lo que lleva a un cambio en cómo la aplicación debe comportarse.

• El cambio se refleja en la UI (View): Después de que el estado cambia en el store, la vista (o interfaz de usuario) se actualiza. En nuestro ejemplo, esto sería como ver a Bruce convertirse en Hulk: la transformación se refleja en la pantalla, mostrando a Hulk listo para la acción.

Vamos a la práctica: Transformación de Bruce a Hulk (React)
En tu aplicación, podrías tener un botón que dice "Transformar a Hulk". El flujo de datos se vería así:

1. El usuario hace clic en el botón "Transformar a Hulk".
2. Se crea una acción ("Transformar a Hulk"), que contiene la información de que Bruce debe transformarse.
3. El dispatcher recibe esa acción y la envía al store encargado de manejar el estado de Hulk.
4. El store actualiza su estado de "Bruce Banner" a "Hulk".
5. La vista se actualiza para reflejar que ahora estás viendo a Hulk en lugar de Bruce Banner, listo para pelear.

Vamos a ver un poco de código de React:

import { useReducer } from 'react';

// Definimos las acciones
const ACTIONS = {
  TRANSFORM_TO_HULK: 'transform_to_hulk',
  TRANSFORM_TO_BANNER: 'transform_to_banner',
};

// Creamos el reducer que maneja los estados de la transformación
const reducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.TRANSFORM_TO_HULK:
      return { ...state, isHulk: true };
    case ACTIONS.TRANSFORM_TO_BANNER:
      return { ...state, isHulk: false };
    default:
      return state;
  }
};

// Componente principal
const HulkReducer = () => {
  // Inicializamos el estado usando useReducer
  const initialState = { isHulk: false };
  const [state, dispatch] = useReducer(reducer, initialState);

  // Función para manejar la transformación
  const handleTransformation = () => {
    if (state.isHulk) {
      dispatch({ type: ACTIONS.TRANSFORM_TO_BANNER });
    } else {
      dispatch({ type: ACTIONS.TRANSFORM_TO_HULK });
    }
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px'}}>
      <h1>{state.isHulk ? 'Hulk' : 'Bruce Banner'}</h1>
      <img
        src={state.isHulk ? 'https://static.wikia.nocookie.net/disney/images/b/b9/Profile_-_Hulk.jpg' : 'https://static.wikia.nocookie.net/loveinterest/images/e/eb/Bruce_banner.jpg'}
        alt={state.isHulk ? 'Hulk' : 'Bruce Banner'}
        style={{ width: '200px', height: 'auto', marginBottom: '20px', borderStyle: 'solid', borderWidth: '3px', borderColor: 'black', borderRadius: '10px'  }}
      />
      <br />
      <button onClick={handleTransformation} style={{color: 'white', backgroundColor: 'green'}}>
        {state.isHulk ? 'Volver a Bruce' : 'Transformar en Hulk'}
      </button>
    </div>
  );
};

export default HulkReducer;

La importancia del flujo unidireccional

¿Por qué es importante que los datos fluyan en una sola dirección en Flux, como la transformación de Hulk? Porque asegura que cada paso del proceso sea predecible y controlado. En vez de que los datos cambien de manera caótica, como cuando Hulk pierde el control, Flux permite que todo siga un orden. Cada vez que se realiza una transformación, sabes exactamente qué lo provocó y cómo se gestionó ese cambio.

En este caso, siempre tienes claro que la transformación empieza con un evento (la acción), pasa por un sistema (dispatcher y store), y luego se muestra en la interfaz de usuario (la vista de Hulk). Si los datos pudieran fluir en todas direcciones, el resultado sería confuso, como si Hulk empezara a transformarse de repente sin razón aparente.

Conclusión

Flux nos da un marco sólido para gestionar los cambios de estado en una aplicación de React, permitiendo que los datos fluyan de manera ordenada, como la secuencia de transformación de Bruce Banner a Hulk. Desde el detonante inicial hasta el cambio final en la interfaz, todo sigue una secuencia predecible y clara, haciendo que manejar aplicaciones complejas sea más sencillo y menos propenso al caos. ¡Con Flux, controlamos la transformación, no como Hulk, que pierde el control!