a-simple-store v2.0.16

A Simple Store

This is a Simple Store manager that is suitable for javascript front-end applications.

npm i a-simple-store

import { mut } from 'a-simple-store'

Description Changes (mutates) the state of the object. Here object - it's a wrapper called Subject and contains previous, current states and the binding function.

Example Let's take a look at a common example - clicking on submit button to show the user name on the page. In the following code snippet we mutate our state with new data:

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

import { sub } from 'a-simple-store'

Description Subscribes the object to the store pipeline. This method adds a function to the subject. Function invokes when state of subject is changed.

Example In the first example we changed the state by clicking on the submit button. Now we want to track our changes and render user name. So to show the username somewhere on the screen let's subscribe:

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

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

import { unsub } from 'a-simple-store'

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

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.

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

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

import { destroy } from 'a-simple-store'

Description Destroys subject by its name - removes the subject with all binding function from the store pipeline

Example It sometimes happens when we should remove the whole subject. It could be possible if the whole subject is located in one destroyable element (for example modal window) and only there. It would be better to remove all binding 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');
});

import { subject } from 'a-simple-store'

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) { ... }

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.