Saltar al contenido principal

Slices

Los "slices" son módulos que representan partes específicas del estado global. Cada slice contiene:

  1. Un fragmento del estado global
  2. Acciones para modificar ese estado
  3. Selectores para acceder al estado

Estructura de un Slice​

Cada slice se define como una función que recibe set y get y devuelve un objeto con el estado y las acciones:

export const createExampleSlice = (set, get) => ({
    // Estado
    someState: initialValue,

    // Acciones
    updateSomeState: (newValue) => set({ someState: newValue }),

    // Acciones asíncronas
    fetchData: async () => {
        const data = await someApiCall();
        set({ someState: data });
    },

    // Acciones que usan el estado actual
    doSomethingWithCurrentState: () => {
        const currentState = get().someState;
        set({ someState: modifyState(currentState) });
    }
});

Slices en nuestro proyecto​

Nuestro proyecto está organizado en los siguientes slices:

Cart Slice​

Gestiona el estado del carrito de compras.

Page Slice​

Mantiene información sobre la página actual (producto, categoría, etc.).

User Slice​

Maneja el estado del usuario (sesión, datos, etc.).

Settings Slice​

Almacena configuraciones globales de la aplicación.

Quote Slice​

Gestiona cotizaciones y presupuestos.

Cada slice tiene su propia documentación detallada: