https://github.com/iconshot/rioter

JavaScript library for handling state management efficiently.
https://github.com/iconshot/rioter

javascript state-management

Last synced: 10 days ago
JSON representation

JavaScript library for handling state management efficiently.

• Host: GitHub
• URL: https://github.com/iconshot/rioter
• Owner: iconshot
• License: mit
• Created: 2023-07-07T18:04:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-03T00:29:36.000Z (over 1 year ago)
• Last Synced: 2024-04-24T18:42:00.862Z (10 months ago)
• Topics: javascript, state-management
• Language: JavaScript
• Homepage: https://rioter.dev
• Size: 8.79 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [Rioter](https://rioter.dev/)

JavaScript library for handling state management efficiently.

## Installation

```

npm i rioter

```

## Get started

### Atom

An `Atom` is an object that will keep some data.

```js

import { Atom } from "rioter";

class CounterAtom extends Atom {

  constructor(store) {

    super(store);

    this.number = 0;

  }

  increment() {

    this.number++;

    this.update(); // notify the store of an update

  }

}

```

### Store

A `Store` is formed by a group of `Atom`s.

```js

import { Store } from "rioter";

import CounterAtom from "./CounterAtom";

const store = new Store({ counter: CounterAtom }); // actual objects will be created internally

const state = store.getState();

// state.counter.number = 0

```

Every time there's a change in one of the `Atom`s, `Store` will emit an `update` event.

```js

const state = store.getState();

setTimeout(() => {

  state.counter.increment();

}, 5000); // execute after 5 seconds

store.on("update", () => {

  // state.counter.number = 1

});

```

### Persistor

`Persistor` will add persistence to your `Store`.

```js

import { Store, Persistor } from "rioter";

import CounterAtom from "./CounterAtom";

const store = new Store({ counter: CounterAtom });

const persistor = new Persistor(store, window.localStorage);

persistor.init().then(() => {

  // persistor has been loaded

});

```

We can choose which atoms are persisted just by overriding two methods: `hydrate` and `persist`.

```js

import { Atom } from "rioter";

class CounterAtom extends Atom {

  constructor(store) {

    super(store);

    this.number = 0;

  }

  // hydrate will be called when we have read the data from Storage

  // so we can update the atom properties accordingly

  hydrate(data) {

    this.number = data;

  }

  // persist will be called every time there's an update in the store,

  // the data this method returns is what will be saved in Storage,

  // if null is returned, this atom will not be persisted,

  // null is returned by default

  persist() {

    return this.number;

  }

  // handlers

  increment() {

    this.number++;

    this.update();

  }

}

```