Zustand al Rescate: Gestión de Estado Global Eficiente en React Native

Manejar el estado global en aplicaciones de React Native puede ser un desafío, especialmente a medida que la aplicación crece. Si bien Redux ha sido durante mucho tiempo una opción popular, su configuración y estructura pueden ser demasiado complejas para algunos proyectos. Aquí es donde Zustand se destaca: una librería ligera y fácil de usar para manejar el estado global, sin necesidad de dependencias adicionales ni configuraciones complejas. En este artículo, aprenderás cómo configurar y usar Zustand en tu aplicación de React Native, aprovechando al máximo sus capacidades, incluidas las ventajas de la persistencia de estado.

¿Por qué elegir Zustand?

Ventajas

1. Ligero y sencillo: Zustand ofrece una API intuitiva sin la sobrecarga de configuraciones adicionales.
2. Reactivo y rápido: Permite actualizaciones reactivas y eficientes sin necesidad de middlewares o adaptadores complejos.
3. Flexible: Puedes optar por usarlo en aplicaciones pequeñas o grandes, adaptando su uso según tus necesidades.
4. Soporte de persistencia: Con Zustand, puedes persistir el estado fácilmente utilizando AsyncStorage o cualquier otro almacenamiento personalizado.

Desventajas

1. Menos herramientas de desarrollo: A diferencia de Redux, Zustand no tiene tantas herramientas de depuración y desarrollo.
2. Menor comunidad: Aunque está creciendo, la comunidad y el ecosistema de Zustand aún no son tan grandes como los de otras soluciones.

Instalación

Primero, debes instalar Zustand en tu proyecto de React Native. Ejecuta el siguiente comando en tu terminal:

npm install zustand

Si planeas usar la persistencia de estado, también necesitarás @react-native-async-storage/async-storage:

npm install @react-native-async-storage/async-storage

Creando un Store Simple

Comencemos con un ejemplo básico. Imagina que tienes un menú flotante en tu aplicación que debe abrirse y cerrarse según la interacción del usuario. Puedes crear un store simple con Zustand para manejar este estado desde cualquier componente:

import { create } from 'zustand';

interface IFloatMenuStore {
  isMenuVisible: boolean;
  toggleMenu: () => void;
}
export const useFloatMenuStore = create<IFloatMenuStore>((set) => ({
  isMenuVisible: false,
  toggleMenu: () =>
    set((state) => ({
      isMenuVisible: !state.isMenuVisible,
    })),
}));

En este ejemplo, useFloatMenuStore es un hook que puedes usar en tus componentes para acceder y actualizar el estado del menú.

Usando el Store en Componentes

Para utilizar el store en tu componente, simplemente importa el hook y accede al estado y a las acciones:

import React from 'react';
import { View, Button, Text } from 'react-native';
import { useFloatMenuStore } from './stores/useFloatMenuStore';

const FloatMenuComponent = () => {
  const { isMenuVisible, toggleMenu } = useFloatMenuStore();
  return (
    <View>
      <Button title="Toggle Menu" onPress={toggleMenu} />
      {isMenuVisible && <Text>Menú Visible</Text>}
    </View>
  );
};
export default FloatMenuComponent;

En este componente, el botón activa la función toggleMenu que alterna la visibilidad del menú. Y lo mejor: eso es todo. No necesitas configurar ningún Provider, ni envolver tus componentes, ni ninguna de esas configuraciones complejas que solías hacer con Redux. ¡Tan sencillo como importar y usar!

Persistencia de Estado

Zustand también permite persistir el estado usando middlewares. Esto es útil, por ejemplo, si deseas guardar un código de acceso entre sesiones.

Configurando la Persistencia

A continuación, te muestro cómo crear un store que persiste un código de acceso:

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface IAccessCodeStore {
  accessCode: string;
  setAccessCode: (code: string) => void;
  clearAccessCode: () => void;
}
export const useAccessCodeStore = create<IAccessCodeStore>()(
  persist(
    (set) => ({
      accessCode: '',
      setAccessCode: (code: string) => set({ accessCode: code }),
      clearAccessCode: () => set({ accessCode: '' }),
    }),
    {
      name: 'access-code-store',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

En este ejemplo, accessCode se guarda en AsyncStorage, lo que asegura que el estado persista incluso cuando la aplicación se cierra. Puedes usar este store en cualquier componente para manejar y recuperar el código de acceso.

Usando el Store Persistente en un Componente

typescript
Copy code
import React from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { useAccessCodeStore } from './stores/useAccessCodeStore';

const AccessCodeComponent = () => {
  const { accessCode, setAccessCode, clearAccessCode } = useAccessCodeStore();
  const [inputCode, setInputCode] = React.useState('');
  return (
    <View>
      <TextInput
        value={inputCode}
        onChangeText={setInputCode}
        placeholder="Introduce tu código de acceso"
      />
      <Button title="Guardar Código" onPress={() => setAccessCode(inputCode)} />
      <Button title="Borrar Código" onPress={clearAccessCode} />
      <Text>Código Actual: {accessCode}</Text>
    </View>
  );
};
export default AccessCodeComponent;

Este componente permite al usuario introducir un código de acceso, guardarlo en el store persistente y borrarlo cuando sea necesario.

Zustand es una herramienta poderosa y minimalista para manejar el estado global en aplicaciones de React. Ofrece una configuración rápida y flexible, con la opción de persistir datos fácilmente. Aunque puede carecer de algunas herramientas avanzadas de desarrollo, su simplicidad y rendimiento lo convierten en una excelente opción para desarrolladores que buscan una solución eficiente y fácil de implementar. Si buscas una alternativa más liviana y directa a Redux o Context API, definitivamente vale la pena considerar Zustand en tu próximo proyecto de React.

Para los que quieran profundizar más y explorar todas las funcionalidades de Zustand, pueden consultar la documentación oficial de Zustand. Aquí encontrarás información detallada sobre su uso, ejemplos avanzados y todo lo que necesitas saber para aprovechar al máximo esta poderosa librería.