Código fuente que permita garantizar que la selecc...

Question

Código fuente que permita garantizar que la selección del tema persista en localStorage y crear un componente práctico como un botón para cambiar el tema. Debe tener como características que modifique el store de Zustand para guardar y recuperar el tema del localStorage.
Crea un componente reutilizable (ejemplo botón/interruptor) para cambiar el tema. Asegura que el tema persista tras recargar la página.
Entregable:
Código de persistencia en localStorage.
Componente práctico funcional y bien documentado.
Pruebas finales de persistencia y usabilidad.

Answer 1

A continuación se muestra un ejemplo práctico de cómo implementar la persistencia de un tema (ej. claro u oscuro) en localStorage utilizando Zustand para el manejo de estado global, junto con un componente reutilizable (un botón) para cambiar dicho tema. Este código está escrito en React (usando Hooks) y asume que se está trabajando con un proyecto creado con Create React App o similar.

1. Instalación de dependencias

Asegúrate de tener instalado Zustand:

bash
npm install zustand

O con Yarn:

bash
yarn add zustand

2. Creación del store de Zustand con persistencia en localStorage

Vamos a crear un store que maneje el estado de nuestro tema. Para simplificar, usaremos el middleware persist que ya trae Zustand para almacenar automáticamente en localStorage. En tu carpeta de stores (por ejemplo, src/stores/useThemeStore.js) coloca el siguiente código:

javascript
// src/stores/useThemeStore.js

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useThemeStore = create(
  persist(
    (set) => ({
      // Valor inicial del tema
      theme: 'light',

      // Acción para alternar el tema
      toggleTheme: () =>
        set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light'
        })),
    }),
    {
      name: 'theme',          // Clave con la que se guardará en localStorage
      getStorage: () => localStorage, // API de almacenamiento (puede ser sessionStorage)
    }
  )
);

export default useThemeStore;

Explicación

persist: Middleware de Zustand que permite guardar el estado global en localStorage y recuperarlo en recargas.
theme: Estado que define si el tema es light (claro) u dark (oscuro).
toggleTheme: Función que alterna el valor del tema en el store.
name: Clave bajo la cual se almacenará el estado en el localStorage ("theme").
getStorage: Indica explícitamente que el almacenamiento sea localStorage.

3. Creación del componente reutilizable para cambiar el tema

Ahora crearemos un componente (por ejemplo, ThemeToggleButton.js) que muestre un botón para alternar entre los dos temas. Este componente será totalmente reutilizable en tu aplicación.

jsx
// src/components/ThemeToggleButton.js

import React from 'react';
import useThemeStore from '../stores/useThemeStore';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useThemeStore();

  return (
    <button onClick={toggleTheme}>
      Cambiar a {theme === 'light' ? 'dark' : 'light'}
    </button>
  );
};

export default ThemeToggleButton;

Explicación

useThemeStore: Consumimos el store de Zustand para acceder a theme y a la función toggleTheme.
button: Llamamos a la función toggleTheme al hacer click, y mostramos un texto dinámico según el tema actual.

4. Usando el tema para modificar el estilo de la aplicación

En tu componente principal (por ejemplo, App.js), podemos añadir un useEffect que ajuste el <body> para aplicar la clase correspondiente (light u dark) y así poder cambiar la apariencia global usando CSS.

jsx
// src/App.js

import React from 'react';
import useThemeStore from './stores/useThemeStore';
import ThemeToggleButton from './components/ThemeToggleButton';

function App() {
  const { theme } = useThemeStore();

  // Al cambiar 'theme', modificamos la clase de <body> para que nuestros estilos cambien
  React.useEffect(() => {
    document.body.className = theme;
  }, [theme]);

  return (
    <div>
      <h1>Mi aplicación con tema {theme}</h1>
      <ThemeToggleButton />
    </div>
  );
}

export default App;

Explicación

document.body.className = theme: Asignamos la clase light o dark al body. Puedes definir en tu CSS algo como:
```
css
body.light {
  background-color: white;
  color: black;
}

body.dark {
  background-color: #333;
  color: white;
}
```
De esta manera, se aplicarán estilos distintos dependiendo del tema.

5. Pruebas finales de persistencia y usabilidad

Inicia tu aplicación (por ejemplo con npm start o yarn start).
Por defecto, se asignará el tema light.
Haz clic en el botón para alternar a dark.
Recarga la página. Verás que el tema permanecerá en dark, pues se recupera desde localStorage.
Si vuelves a cambiar de tema y recargas, se mantendrá el nuevo valor.

Esto confirma la persistencia y que el usuario conserva el tema seleccionado aun después de recargar la página.

Comentarios finales

La clave de la persistencia es el uso del middleware persist en Zustand, que internamente lee y escribe en el localStorage.
Si en algún momento quieres cambiar la clave de localStorage, basta con modificar la propiedad name.
Este patrón de “store + componente toggler + estilos dinámicos” te permite escalar el manejo de temas a toda la aplicación sin complicaciones.

Con esto, tu aplicación conservará el tema seleccionado y el usuario podrá alternarlo cuando lo desee. ¡Listo!

Código fuente que permita garantizar que la selecc...

Câu hỏi

Suy nghĩ

Trả lời

1. Instalación de dependencias

2. Creación del store de Zustand con persistencia en localStorage

Explicación

3. Creación del componente reutilizable para cambiar el tema

Explicación

4. Usando el tema para modificar el estilo de la aplicación

Explicación

5. Pruebas finales de persistencia y usabilidad

Comentarios finales

Chia sẻ Q&A này