This is the second part of a multi-part series showcasing the power of Stoxy. I highly recommend reading through the first part before this one to have the complete experience.

Quick, zero-setup, persistent State management with Stoxy

Matsuuu ・ Mar 15 '21 ・ 3 min read

A quick recap: Stoxy is a State management system equipped with Web Components. You can find the documentation, guides and more at Stoxy.dev

Last time we went through some of the basic read and write operations Stoxy provides, and also how easy it is to persist data through page loads with Stoxy.

Adding data

When developing web applications, a lot of the time we end up having collections of data stored in arrays. Quite often we find ourselves in the situtation that we would want to append to the state data, instead of completely rewriting it. This is where the add keyword of Stoxy comes into play.

Say we had the user data object from the last chapter:

const userData = {
    userName: "Stoxy",
    customerPoints: 10,
    shoppingCart: [
        { id: 123, name: "Flaming hot cheetos" }
    ],
    shoppingHistory: {
        latestProducts: [
            { id: 555, name: "Doritos" },
            { id: 958, name: "Pringles" }
        ]
    }
};

and we wanted to add another product to our shopping cart. Without even requiring a reference to the state object, we can easily modify the arrays inside it with add.

import { add } from '@stoxy/core';

const product = { id: 555, name: "Doritos" };
add("userData.shoppingCart", product);

The state object will have our new product appended to the pre-existing array without us having to manually manipulate the state object itself.

As seen in the example, the operation can even target properties of the state object, instead of the full state object if needed.

Removing data

Similar to the situations where we would want to add data to a state object, we might end up in a situation where we want to remove data from the state object without having the read and write it explicitly. In these cases remove comes in extra handy:

Say we wanted to remove the Doritos we added above, we could easily do it with a predicate to filter them out:

import { remove } from '@stoxy/core';

// Removes product with the id 555
remove("shoppingcart", product => product.id === 555);

The power of remove comes from the possibility of removing by a predicate instead of a reference to the object itself.

We could for example filter out all the products costing more than 5€ simply by writing a quick check for the price of the product:

// Remove all products with a price over 5
remove("shoppingcart", product => product.price > 5);

The add and remove functions make it extremely simple to manipulate collections of data in your state, without the need of reading and writing the data.

If we wanted to remove the whole userdata from our state, we could also utilize the clear keyword:

import { clear } from '@stoxy/core';

clear('userData');

Subscribing to events

In many situations we want to be aware of when a state object changes it's shape and react to it. For these situations, Stoxy exposes a API called sub.

Sub allows the developer to subscribe to state updates of a given state object key.

import { sub } from '@stoxy/core';

sub('userData', e => console.log('User Data updated. Current data: ', e.data));

This makes it extremely simple to create reactive workflows to for example update a given component when a state change is observed.

Final word

We've gone through most of the small API Stoxy provides to the developer to manage their state. In the next chapter we will be going through the Web Components Stoxy ships to ease frameworkless development with Stoxy.

Stoxy is still in active development and tries to iterate to become a popular and widely adopted state management system. To help Stoxy stand out more, I would love you to go check out the project in GitHub, give it a star, and try it out in your own project!