domingo 15 diciembre 2024

Cómo incrementar un valor en Zustand

Zustand es una librería de gestión de estado en React que destaca por su simplicidad y flexibilidad. Incrementar un valor en Zustand implica definir una función dentro de su store para actualizar el estado de manera eficiente.

Crear un store en Zustand

Primero, necesitas instalar Zustand si aún no lo tienes en tu proyecto:

npm install zustand

Luego, configura un store básico que incluye un valor inicial y una función para incrementarlo:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0, // Estado inicial
  increment: () => set((state) => ({ count: state.count + 1 })), // Función para incrementar
}));

export default useStore;

Uso en un componente React

En un componente React, puedes acceder al estado y la función de incremento utilizando el hook proporcionado por Zustand:

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment } = useStore();

  return (
    <div>
      <p>Valor actual: {count}</p>
      <button onClick={increment}>Incrementar</button>
    </div>
  );
};

export default Counter;

Ejemplo completo

El siguiente código demuestra cómo incrementar un valor usando Zustand en un entorno funcional:

import React from 'react';
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const App = () => {
  const { count, increment } = useStore();

  return (
    <div>
      <h1>Contador con Zustand</h1>
      <p>Valor actual: {count}</p>
      <button onClick={increment}>Incrementar</button>
    </div>
  );
};

export default App;