Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomas2387/almy
🗄️ 673 bytes store for managing the state in your application
https://github.com/tomas2387/almy
javascript state-management
Last synced: 3 months ago
JSON representation
🗄️ 673 bytes store for managing the state in your application
- Host: GitHub
- URL: https://github.com/tomas2387/almy
- Owner: tomas2387
- License: mit
- Created: 2018-01-21T21:24:05.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-16T13:28:36.000Z (4 months ago)
- Last Synced: 2024-07-18T06:44:00.706Z (4 months ago)
- Topics: javascript, state-management
- Language: JavaScript
- Homepage: https://tomas2387.github.io/almy/
- Size: 937 KB
- Stars: 26
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# 🗄️ almy
[](https://www.npmjs.com/package/almy)
[](https://travis-ci.org/tomas2387/almy)
[](https://coveralls.io/github/tomas2387/almy?branch=master)
The simpliest store for managing the state in your application.
Works in all environments and all browsers.
## Why do I need a centralized state management
Managing the information rendered is difficult, mostly when our apps grow large and the state is scattered across many components and the interactions between them without control.
To solve this, the current state of the art solution is to use a globalized state where we can centralize and have more control over the information we have to render. Almy is a simple library that uses a pub/sub façade along with a centralized state management which makes the the side effects of changing information easy to control and eliminates the risk of getting race conditions in our applications.
## Installation
```bash
npm install --save almy
```
## Methods
- **dispatch(key: string, value: any)**
_Dispatches some event that happened in a key value fashion_
- **subscribe(key: string, callback: Function)**
_Subscribes to dispatched events. If someone has dispatched an event before, it calls the callback right away_
- **state(key:?string):Object**
_Returns the state of your application_
## Usage
Including it as a script tag
```html
almy.almy.dispatch('window_width', 524)
almy.almy.subscribe('window_width', function(newWidth) {
//Do something with the new width
})
```
Including it as a module
```html
import {almy} from './node_modules/almy/dist/almy.esm.js'
almy.subscribe('user->name', (username) => {
document.getElementById('content').textContent = username;
});
almy.dispatch('user', {id: 1, name: 'nick'})
```
Using in a node environment
```js
const { almy } = require('almy')
almy.subscribe('cpu_usage', function(newCpuUsage) {
//Do something with the new cpu usage
})
//In some other place in your code
almy.dispatch('cpu_usage', 9000)
```
You can also dispatch objects:
```js
const { almy } = require('almy')
almy.subscribe('cpu', function(cpu) {
console.log(cpu.temperature)
})
almy.dispatch('cpu->temperature', 65)
```
Or subscribe to objects properties and receive every change:
```js
almy.subscribe('cpu->ips', function(ips) {
console.log('Intructions per seconds are '+ips)
});
...
almy.dispatch('cpu', {ips: 1})
...
almy.dispatch('cpu', {ips: 5})
// This would ouput:
// "Intructions per seconds are 1"
// "Intructions per seconds are 5"
```
## Limitations
Only one object deepness subscriptions are supported. Example:
````js
almy.dispatch('user', {favorites: {televisions: {'4k': true}}})
// This doesn't work
almy.subscribe('user->favorites->televisions->4k', value => {
})
// This does work
almy.subscribe('user->favorites', favorites => {
if (favorites.televisions['4k']) {
}
})
````
A flatten state is easier to reason and understand.
## Other state management libraries
- Vuex: https://github.com/vuejs/vuex
- Redux: https://github.com/reduxjs/redux
- Flux: https://github.com/facebook/flux
## References
Worlds: Controlling the Scope of Side Effects
http://www.vpri.org/pdf/tr2011001_final_worlds.pdf