subscriber_state

** Un manejador de estado global simple y flexible para aplicaciones React **

Descripción

Subscribe_state es un paquete de TypeScript diseñado para simplificar la gestión del estado global en aplicaciones React. Ofrec0e una API intuitiva para definir el estado inicial, crear acciones y suscribir componentes a los cambios de estado.

Características clave:

• Definición declarativa del estado: Define el estado inicial y las acciones de manera clara y concisa.
• Tipos seguros: TypeScript garantiza la seguridad de tipos en todo el código.
• Suscripción flexible: Suscríbete a cualquier parte del estado utilizando strings o arrays.
• Rendimiento optimizado: Evita re-renderizados innecesarios gracias a la opción de deshabilitar las actualizaciones automáticas.
• API sencilla: Una API intuitiva y fácil de aprender.

Instalación

  npm install subscriber_state

Error structuredClone

Para sotbentar el error "Property 'structuredClone' doesn't exist" o "structuredClone not supported"

Instala

  npm install core-js

importa

import "core-js/actual/structured-clone";

API

createWarehouse

Función principal para crear un almacén de estado.

* Descripción detallada: Esta función se utiliza para definir el estado inicial de una aplicación y las acciones que pueden modificar ese estado.
  El estado inicial se proporciona como un objeto que cumple con el tipo T, y las acciones se definen como funciones que modifican el estado.
  La función createWarehouse crea un almacén que puede ser utilizado para suscribirse a cambios en el estado y realizar actualizaciones.

* Firma:
  createWarehouse<T, K>(createInitialState: (update: Update) => T & K | (T & K))

  * T: Tipo del estado de la aplicación.
  * K: Tipo de las acciones que pueden modificar el estado.
  * createInitialState: Función que recibe una función de actualización
  (update) y devuelve el estado inicial u objeto de que cumple con los tipos
  T y K

update

Función realiza una llanada a actializar el estado.

useActions

El hook useActions, es una utilidad para acceder y utilizar las acciones definidas dentro de un almacén de estado global.
Ofrece una manera conveniente de interactuar directamente con el estado, desencadenando actualizaciones.

* Descripción:
  * Recuperando Acciones: El hook permite obtener acciones específicas o todas ellas desde el almacén de estado global.
  * Selección de Acciones: Puedes especificar acciones individuales por nombre o solicitar todas las acciones a la vez.

* Firma:
  useActions<T>(actions: string | string[]): { [key in keyof T]: Action }

  * Tipo Genérico T: Representa el tipo del objeto de acciones, que se infiere del parámetro actions.

  * Parámetro actions:
    * String: Puede ser un nombre de acción único.
    * Array de Strings: Puede ser un array de nombres de acciones.

  * Tipo de Retorno: Un objeto que contiene las acciones especificadas como funciones.

useSubscriberState

Hook para suscribirse a propiedades del estado.
* Descripción detallada: useSubscriberState te permite "escuchar" los cambios que ocurren en una o varias propiedades de tu estado global.
Cuando alguna de estas propiedades se actualiza, tu componente se re-renderizará automáticamente, reflejando los nuevos valores.

* Parámetros:
  * Primer parámetro (string o array de strings): Indica las propiedades específicas a las que quieres suscribirte. Puedes pasar un string con el nombre de una propiedad, un array de strings con múltiples nombres, o la palabra "all" para suscribirte a todas las propiedades.
  * Segundo parámetro (booleano, opcional): Este parámetro, que por defecto
  es false, te permite controlar si quieres que tu componente se
  re-renderice inmediatamente cuando se actualicen las propiedades
  suscritas.
  Si lo estableces en true, el re-renderizado se evetara.

* Retorno:
  El hook useSubscriberState devuelve una tupla (un array) con dos elementos:
  * objeto 1: Contiene las propiedades a las que te has suscrito. Puedes acceder a sus valores directamente.
  * objeto 2: Contiene todas las acciones disponibles en tu almacén de estado. Esto te permite modificar el estado si es necesario.

Uso básico

createWarehouse

Ejemolo 1:

import { createWarehouse, update } from "subscriber_state";

type State = {
    counter: number;
    text: string;
    darkMode: boolean;
};

type Actions = {
    onIncrementCounter: () => void;
    onChangeText: (text: string) => void;
    onChangeDarkMode: (isDarkMode: boolean) => void;
};

function onIncrementCounter() {
    update<State>((state: State): State => {
        return { ...state, counter: state.counter + 1 };
    });
}

function onChangeText(text: string) {
    update<State>((state: State): State => ({ ...state, text }));
}

function onChangeDarkMode(isDarkMode: boolean) {
    update<State>(
        (state: State): State => ({ ...state, darkMode: isDarkMode })
    );
}

createWarehouse<State, Actions>({
    counter: 0,
    text: "wold",
    darkMode: true,
    onIncrementCounter,
    onChangeText,
    onChangeDarkMode
});

Ejemolo 2:

import { createWarehouse, type Update } from "subscriber_state";

type State = {
    counter: number;
    text: string;
    darkMode: boolean;
};

type Actions = {
    onIncrementCounter: () => void;
    onChangeText: (text: string) => void;
    onChangeDarkMode: (isDarkMode: boolean) => void;
};

createWarehouse<State, Actions>((update: Update) => ({
    counter: 0,
    text: "wold",
    darkMode: true,
    onIncrementCounter: () => {
        update<State>((state: State): State => {
            return { ...state, counter: state.counter + 1 };
        });
    },
    onChangeText: (text: string) => {
        update<State>((state: State): State => ({ ...state, text }));
    },
    onChangeDarkMode: (isDarkMode: boolean) => {
        update<State>(
            (state: State): State => ({ ...state, darkMode: isDarkMode })
        );
    }
}));

useActions

Ejemplo 1:

import { useActions } from "subscriber_state";

function App() {
    //Acción Específica: Este ejemplo extrae directamente la acción onIncrementCounter del almacén.
    const { onChangeText } = useActions(["onChangeText"]);

    //Uso: La función onIncrementCounter puede ser llamada para desencadenar la actualización de estado correspondiente.
    return (
        <input
            name="name"
            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                onChangeText(event.target.value)
            }
        />
    );
}

Ejemplo 2:

import { useActions } from "subscriber_state";

function App() {
    // Todas las Acciones: Este ejemplo recupera todas las acciones definidas en el almacén.
    const actions = useActions();
    //const actions = useActions('all');

    // Uso: El objeto actions puede ser utilizado para acceder a cualquier acción por su nombre. Por ejemplo, actions.onIncrementCounter() o actions.onChangeText('new text').
    return <button onClick={actions.onIncrementCounter}>to raise</button>;
}

useSubscriberState

ejemplo 1

 import { useSubscriberState } from 'subscriber_state'

export default function InsertText() {
  const [{ darkMode }, { onChangeText }] = useSubscriberState('darkMode');

  return (...);
}

ejemplo 2

import { useSubscriberState } from 'subscriber_state'

export default function InsertText() {
  const [state, { onChangeText }] = useSubscriberState(['darkMode', 'counter']);

  const color: state.darkMode ? '#0a9aff' : '#000000';
  //chroma libreria externa.
  const complementaryColor = chroma(color).complementary().hex();

  const _divStyle = {
    padding: '10px',
    border: `2px solid ${complementaryColor}`,
    backgroundColor: color
  }

  const _spanStyle = { color }

  return (
    <div style={_divStyle}>
    ...
    <span style={_spanStyle} >{state.counter}</span>
    ...
    </div>
  );
}