DEV Community

loading...
Cover image for Announcing: new and light state manager “Jon”

Announcing: new and light state manager “Jon”

priolo22
Updated on ・2 min read

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: { ... },
}
Enter fullscreen mode Exit fullscreen mode

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})
    }
}
Enter fullscreen mode Exit fullscreen mode

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
);
Enter fullscreen mode Exit fullscreen mode

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>);
}
Enter fullscreen mode Exit fullscreen mode

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:
image
Let me know what you think!

Discussion (0)