◎
Selector-first
Selecciona un objeto con exactamente los valores necesarios. Kerros compara sus campos superiores con Object.is.
Kerros
Estado que sigue al árbol de componentes
Convierte cualquier Hook de React en un Store centrado en selectores. Cada Provider crea un límite estable y solo se renderizan de nuevo los componentes cuya selección cambia.
Pega en tu Coding Agent para instalar el paquete y el Skill
Instala @violetflux/kerros con el gestor de paquetes del proyecto y después ejecuta npx skills add violetflux/kerros --skill kerros --agent '*' -y para instalar el Skill de Kerros en todos los Coding Agents compatibles.
createStore · Provider · selector
Comparte estado en tres pasos
Pasa un Hook normal a createStore, monta su Provider y selecciona exactamente los valores necesarios.
import { createStore } from '@violetflux/kerros'
import { useState } from 'react'
const [useCounter, CounterProvider] = createStore(() => {
const [count, setCount] = useState(0)
return { count, setCount }
})
function Counter() {
const { count, setCount } = useCounter(s => ({
count: s.count,
setCount: s.setCount,
}))
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
<CounterProvider>
<Counter />
</CounterProvider>⌁
Nativo de Hooks
Un Store es un Hook de React con nombre. Sigue usando useState, useReducer y tus Hooks de SDK.
◇
Componible
Anida Providers para crear dependencias explícitas y unidireccionales entre Stores.
↗
React 17–19
El shim oficial de external-store prefiere la implementación nativa de React cuando está disponible.