A simple, small JavaScript state library called jstates 📡🛰️
Tags: react, angular, redux, mobx
Published: 2019-12-26 00:36:45

---
title: A simple, small JavaScript state library called jstates 📡🛰️
published: true
description: A simple (one file ☝️), small (less than 800B 🙉), extendable ♻️, and most of all 👀 understandable, JavaScript state library and in addition a Reactjs❤️ subscribe function to use as a HOC (Higher Order Component) without context complications.
tags: react, angular, redux, mobx
---

TL;DR
jstates: the core state library https://www.npmjs.com/package/jstates jstates-react: A Reactjs subscribe function for jstates https://www.npmjs.com/package/jstates-react

A simple (one file ☝️), small (less than 800B 🙉), extendable ♻️, and most of all 👀 understandable, JavaScript state library and in addition a Reactjs❤️ subscribe function to use as a HOC (Higher Order Component) without context complications.

Why another state library? 😒
There are many great state libraries for react and JavaScript in general (for example: redux, mobx, unstated and more…). So why create another one? 😏


I wanted to have the simplest, most clear and usable solution I could think of. I wanted to have a few features in a state library that I didn’t find together in one library:
1. Tiny bundle size (so I don’t have to think twice before installing)
2. Small code base (one file: index.js)
3. Simple and understandable (so other developers could start with it quickly and even improve it)
4. Extendable (so I can add the functionality I need and others could too)
Can have multiple separated states
5. The best api parts of the state libraries I used (IMO, feel free to copy and create your own or maybe create a Pull request 😉)
6. Whatever else others want and need that they can’t find out there…

State can be simple and there is no reason why there shouldn’t be many of them out there for many use cases and for the developers around us with different (some might say “strange” 😝) flavors.

When I started with Reactjs 😍, before even playing for a while with react, I was told to use redux and to learn it straight away 😓.
Redux (“The King” 👑 as some might call it) is a great library 👍, but I had a hard time with it and a harder time throughout my career explaining it to people 😣.
In addition, explaining the state issue and the components communication in Reactjs and why we need an additional state instead of global objects is complicated enough 😕. I don’t think we need another additional concept to learn on the way (again, IMO 😅).

So without further delay 📣, I would like to present to you…

Jstates, a simple and easy to use state library that would work with any js library or framework 🎉

{% gist https://gist.github.com/orYoffe/25fe1747deb524737bb301d7d2c63ded file=jstates_simple_example.js %}

And if you want to use it with Reactjs, it fits without any <Providers> in the root of your app since it’s separated from the components context 😃


{% gist https://gist.github.com/orYoffe/c7a1faa64e5f09255e0a8bdc95b8e971 file=jstates_react_simple_example.js %}

<iframe src="https://cdn.embedly.com/widgets/media.html?type=text%2Fhtml&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;schema=twitter&amp;url=https%3A//twitter.com/oryoffe/status/1199008082220797954&amp;image=https%3A//i.embed.ly/1/image%3Furl%3Dhttps%253A%252F%252Fpbs.twimg.com%252Fprofile_images%252F1150368055895252994%252FwVP1lG_x_400x400.jpg%26key%3Da19fcc184b9711e1b4764040d3dc5c07" allowfullscreen="" frameborder="0" height="596" width="589" title="Or Yoffe on Twitter" class="en t u jh ak" scrolling="auto"></iframe>

Happy hacking 👷 and thank open source people for giving their time to create the great tools I learned from 🙏