Announcing: new and light state manager “Jon”

Introduction

So I started using the native REACT methods REDUCER and PROVIDERS for state management
... eventually I ended up with a light lib inspired by VUEX!
The great thing about VUEX (or FLUX) is that you have a solid structure:
The State is immutable,
The Actions change theState,
The View intercepts theState changes and calls the Actions.
Explicitly expressed by a simple object:

const store = {
    state: { ... },
    getters: { ... },
    actions: { ... },
    mutators: { ... },
}

The idea is of a "single source of truth" so I didn't use classes (which if I'm an OOP enthusiast)
as close as possible to REACT

I was surprised how useful it was in my projects so I decided to "publish" it:
Jon
I also made a template:
SPA-Template

Simple DEMO

Installation

npm install @priolo/jon

Create the store:

my_app/myStore.js

export default {
    state: {
        value: "init value",
    },
    getters: {
        getUppercase: (state) => state.value.toUpperCase(),
    },
    actions: {
        addAtEnd: (state, char, store) => {
            store.setValue(state.value + char)
        }
    },
    mutators: {
        setValue: (state, value) => ({value})
    }
}

Create PROVIDER

my_app/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { MultiStoreProvider } from '@priolo/jon';
import myStore from "./myStore"


const rootElement = document.getElementById("root");
ReactDOM.render(
  <MultiStoreProvider setups={{myStore}}>
    <App />
  </MultiStoreProvider>,
  rootElement
);

Use STORE

my_app/App.js

import { useStore } from "@priolo/jon";
import React from "react";

export default function App() {
  const { state, setValue, addAtEnd, getUppercase } = useStore("myStore")
  const handleClickIncrement = e => addAtEnd("!")

  return (<div>

      <h1>{state.value}</h1><h2>{getUppercase()}</h2>

      <input 
        value={state.value}
        onChange={(e)=>setValue(e.target.value)} 
      />

      <button 
        onClick={handleClickIncrement}
      >add !</button>

  </div>);
}

sandbox

Conclusion

The demo is very simple, but I've used Jon on fairly large projects and haven't regretted it.
Furthermore, they are simple PROVIDERS so for debugging you can use REACT Tool:

Let me know what you think!

Blog