# @atomico/store

> Store to manage predictable and functional asynchrony

Latest version **2.0.1** (published 2024-04-24) · 0 weekly downloads

## Install

```sh
npm install @atomico/store
pnpm add @atomico/store
yarn add @atomico/store
bun add @atomico/store
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-04-24 |
| First published | 2022-04-05 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 16.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | UpperCod |
| Maintainers | uppercod |

## Links

- npm: https://www.npmjs.com/package/@atomico/store
- Repository: https://github.com/atomicojs/store
- Homepage: https://github.com/atomicojs/store#readme
- Issues: https://github.com/atomicojs/store/issues
- npm.io page: https://npm.io/package/@atomico/store

## Dependencies (1)

- [atomico](https://npm.io/package/atomico.md) ^1.78.2

## Recent versions

- 2.0.1 (latest) — 2024-04-24
- 2.0.0 — 2024-04-03
- 1.0.2 — 2022-08-25
- 1.0.1 — 2022-08-25
- 1.0.0 — 2022-08-25
- 0.12.0 — 2022-04-22
- 0.11.0 — 2022-04-19
- 0.10.0 — 2022-04-06
- 0.9.0 — 2022-04-05
- 0.8.0 — 2022-04-05

## 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 (
    <host shadowDom>
      <MyStore state={{ counter: 0 }}>
        <slot />
      </MyStore>
    </host>
  );
});
```

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 (
    <host shadowDom>
      <h1>counter: {store.counter}</h1>
      <button onclick={() => store.counter++}>Increment</button>
    </host>
  );
});
```

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.

---
_Source: https://npm.io/package/@atomico/store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._