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 changedExample
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 oneExample
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 pipelineExample
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 nameExample
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.
