Tieder

A simple store manager library that is useful for managing a global state (store) of your application.

Installation

To install the library type in your terminal the following:

npm i tieder

Description

This library covers a global state functionality. If object state is changed somewhere in your application, these changes are tracked by subscription in another place.
Methods you can use to effectively manage the object state are listed below.

---

1. Sub

Import

import { sub } from 'tieder'

Description

Ads a callback function that invokes when the state of the subject is changed

Example

Let our subject represents the user name that changes by clicking the submit button and depends on the appropriate input field. So we want to track our changes and render user name somewhere in our app. To show the username somewhere on the screen let's subscribe our function to this subject:

const header = document.querySelector('header .hello-container');
this.subscription = sub('username', (previous, current) => {
  header.innerHTML = `Hello, ${current}!`;
});

As you can see here we save our subscription to the variable. This will be used in the future. Subscription - a simple object that contains subject name and a function we just used to subscribe.

---

2. Mut

Import

import { mut } from 'tieder'

Description

Changes (mutates) the state of the object. Here object - a wrapper called Subject that contains previous and current states with the function that invokes when previous state does not equal to current one

Example

To fire a username rendering event we should perform some changes to our subject state. For example, let's do this by clicking on submit button as listed below:

const usernameField = document.getElementById('usernameField');
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', () => {
  mut('username', usernameField.value);
});

Note! To handle subscription events properly you should set your subscritions first and then mutate the correspondend states. Basically it means that you should call sub() before mut(). Otherwise it will not work and it will act like a functionless subject.

---

3. Unsub

Import

import { unsub } from 'tieder'

Description

Unsubscribes target subscription from the store pipeline. Removes a function saved in the Subscription from Subject.

Example

Let's imagine that all logic above was in a modal dialog and this component will be destroyed when click on close button. So we need to unsubscribe our function from the subject state to avoid the possible buffer overflow:

const closeBtn = document.getElementById('closeBtnId')
closeBtn.addEventListener('click', () => {
  unsub(this.subscription);
});

As you can see, here we use our saved subscription object. This is needed for store engine to know what function must be removed from the subject.

---

4. Destroy

Import

import { destroy } from 'tieder'

Description

Destroys subject by its name - removes the subject with all functions from the store pipeline

Example

It sometimes happens when we should remove the whole subject. It could be possible if the whole subject (mut and sub methods related to one Subject are in one place) is located in one destroyable element (for example modal dialog) and only there. It would be better to remove all tied callback functions and the subject at the same time, so we don't need to unsubscribe each function one by one.

const closeBtn = document.getElementById('closeBtnId')
closeBtn.addEventListener('click', () => {
  destroy('username');
});

---

5. Subject

Import

import { subject } from 'tieder'

Description

Gets a subject by its name

Example

It often happens when we want to get the current value of the subject for some purposes. Moreover if we don't use sub/unsub functionality - just for saving the data that must be accessible through whole app - we need a simple way to know the subject data. So we can use subject method to retrieve this information:

const username = subject('username')?.cur
if (username) { ... }

---

6. Stop

Import

import { stop } from 'tieder'

Description

Stops and clears the pipeline interval. After this none of created Subjects will be tracked.

---

Store manager does not need special initialization, because it's a singletone and it's initialized automatically.
Store also works with complicated objects such as arrays, classes, functions etc.