DEV Community

Or Yoffe
Or Yoffe

Posted on • Edited on

23 10

A simple, small JavaScript state library called jstates 📡🛰️

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 🎉

const createState = require("jstates");
const myState = createState({ counter: 0 });
function onUpdate(state) {
console.log("onUpdate: counter =", state.counter);
}
myState.subscribe(onUpdate);
myState.setState(state => ({ counter: ++state.counter }));
// => onUpdate: counter = 1

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

import { createState, subscribe, useSubscribe } from "jstates-react";
const counterState = createState({ counter: 0 });
const addOne = () => counterState.setState(state => ({ counter: ++state.counter }));
const removeOne = () => counterState.setState(state => ({ counter: --state.counter }))
function Counter() {
return (
<>
<button onClick={addOne}>add one +</button>
<button onClick={removeOne}>remove one -</button>
</>
);
}
// with useSubscribe hook
function App() {
const { counter } = useSubscribe(counterState);
return (
<div>
<p>Current counter: {counter}</p>
<Counter />
</div>
);
}
export default App;
// with HOC subscribe function
function App({ counter }) {
return (
<>
<p>Current counter: {counter}</p>
<Counter />
</>
);
}
const mapStates = (counterState) => ({
counter: counterState.counter
});
export default subscribe(App, counterState, mapStates);

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

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay