https://github.com/atomicojs/store
https://github.com/atomicojs/store
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/atomicojs/store
- Owner: atomicojs
- Created: 2022-04-04T04:19:52.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T04:41:20.000Z (about 2 years ago)
- Last Synced: 2024-10-29T10:09:15.925Z (over 1 year ago)
- Language: TypeScript
- Size: 473 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @atomico/store@2
Es una solución minimalista para sincronizar el estado de aplicaciones o sistemas de componentes que requieran manejo bidireccional de datos controlada.
## Primeros pasos.
### Crear el store
Los store en Atomico son webcomponents con comportamiento similar al API de contexto de Atomico, ejemplo:
**Creacion del store**
```tsx
import { createContext } from "@atomico/store";
const MyStore = createContext({ counter: 0 });
customElements.define("my-store", MyStore);
```
**Definicion del store**
```tsx
import { c } from "atomico";
import { MyStore } from "./my-store";
export const MyApp = c(() => {
return (
);
});
```
En el codigo anterior hemos diponibilizado el store para todo hijo del webcomponente.
## Consumo del store y reactividad.
```tsx
import { c } from "atomico";
import { useStore } from "@atomico/store";
import { MyStore } from "./my-store";
export const MyForm = c(() => {
const store = useStore(MyStore);
return (
counter: {store.counter}
store.counter++}>Increment
);
});
```
Como notaras tiene la libertad de actualizar el store facilmente gracias al api de Proxy.
## ¿manejo bidireccional de estados?
Si conoces el api de contexto de Atomico sabrás que esta es unidireccional osea el padre despacha actualizaciones al hijo. @atomico/store es bidirecional permitiendo que todo consumidor del store se sincronice osea el padre puede despachar actualizaciones al hijo y el hijo puede despachar actualizaciones al padre.