A naturally asynchronous store 🤓
Tags: atomicojs, webcomponents, react, redux
Published: 2022-04-19 17:20:49

---
title: A naturally asynchronous store 🤓
published: true
description: A new library that is a "monad" for managing asynchronous states 
tags: atomicojs, webcomponents, react, redux 
series: AtomicoJs projects
cover_image: https://i.ibb.co/Vmp6HYL/atomico-store-2.png
---

In this article you will learn about @atomico/store, a naturally asynchronous, predictable and finite state manager. but first some code 👇.

## Preview

```ts
interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

const store = new Store(initialState, {
  actions: { getProducts },
});
```

The above code solves the following goals:

1. [Asynchrony management](#asynchrony-management).
2. [Finitely predictable asynchrony](#finitely-predictable-asynchrony).
3. [Modularity and composition](#modularity-and-composition).

### Asynchrony management

Application events and service calls are naturally asynchronous, with @atomico/store you can use asynchronous functions or asynchronous generators to define the update cycle.

**update cycle?** By this I mean the states that occur sequentially when dispatching the action, example:

```ts
async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}
```

The previous action will generate 2 states when dispatched:

1. state 1:`{loading: true, products:[]}`
2. state 2: `{loading: false, products:[...product]}`

The advantage of this is that the process is clearly observable by the store and by whoever dispatches the action.

### Finitely predictable asynchrony

Every action in @atomico/store is wrapped in a promise that defines when it ends its cycle, this will let you execute actions sequentially, example:

```ts
await store.actions.orderyBy();
await store.actions.insert({ id: 1000 });
await store.actions.updateAll();
```

### Modularity and composition

@atomico/store allows to decouple the actions and the state of the store, for a better modularization , example:

**actions.js**

```ts
export interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

export const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

export async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}
```

**store.js**

```ts
import * as Actions from "./actions";

export default new Store(Actions.initialStore, { actions: { Actions } });
```

## Example

{% embed https://stackblitz.com/edit/atomico-store?view=preview %}


## @atomico/store is AtomicoJS project.

[**AtomicoJS?**](https://atomicojs.github.io/) Open source project for the creation of interfaces based on webcomponents, @atomico/store was created with Atomico, a library of only 3kB that will allow you to create webcomponents with a functional approach, we invite you to learn more about Atomico and its tools that will improve your experience with webcomponents.

👐 I invite you to join the Atomicojs community and learn more about our projects! 👇

<table width="100%"> 
<tr>
<td>


<a href="https://twitter.com/atomicojs"><img src="https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg"/></a>

</td>
<td>


<a href="https://discord.gg/7z3rNhmkNE"><img src="https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg"/></a>

</td>

<td>

<a href="https://atomico.gitbook.io/doc/atomico/atomico-store"><img src="https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg"/></a>

</td>

</tr>
<tr>



<td colspan="3">

<a href="https://github.com/atomicojs/store"><img src="https://raw.githubusercontent.com/atomicojs/atomico/brand/link-to-github.svg"/></a>

</td>
</tr>
</table>