Why
Yet another React library! Don't you programmers have anything better to do?
We need to separate the concerns!
In react you usually use the STATE PATTERN
There are many tools to do this:
and they are fantastic libraries with their pros and cons.
And why should I use your
Jon
?
You may not use it, I just made it available.
However, there are at least two reasons, in my opinion, for choosing it:
It is minimalist
You can put the code directly into your project: it's just a jon_juice.js
file
and everything will work perfectly (except the watcher
...whatever)
without using any dependencies in package.json
.
import { useEffect, useState, useSyncExternalStore, version } from 'react'
// HOOK to use the STORE
function useStore18(store) {
return useSyncExternalStore(store._subscribe, () => store.state)
}
function useStore17(store) {
const [state, setState] = useState(store.state)
useEffect(() => store._subscribe(setState), [store])
return state
}
export const useStore = version.slice(0,2)=="17" ? useStore17 : useStore18
export function createStore(setup, name) {
let store = {
// the current state of the store
state: setup.state,
// the listeners that are watching the store
_listeners: new Set(),
// add listener to the store
_subscribe: (listener) => {
store._listeners.add(listener)
return () => store._listeners.delete(listener)
},
}
// GETTERS
if (setup.getters) {
store = Object.keys(setup.getters).reduce((acc, key) => {
acc[key] = (payload) => setup.getters[key](payload, store)
return acc
}, store)
}
// ACTIONS
if (setup.actions) {
store = Object.keys(setup.actions).reduce((acc, key) => {
acc[key] = async (payload) => await setup.actions[key](payload, store)
return acc
}, store)
}
// MUTATORS
if (setup.mutators) {
store = Object.keys(setup.mutators).reduce((acc, key) => {
acc[key] = payload => {
const stub = setup.mutators[key](payload, store)
// if the "mutator" returns "undefined" then I do nothing
if (stub === undefined) return
// to optimize check if there is any change
if (Object.keys(stub).every(key => stub[key] === store.state[key])) return
store.state = { ...store.state, ...stub }
store._listeners.forEach(listener => listener(store.state))
}
return acc
}, store)
}
return store
}
Syntax stolen from VUEX
Jon
owes a lot to Vuex
in my opinion, one of the best frameworks for STORE management:
it has a syntax that is easy to use and clear.
... and for this Jon
will be grateful to VUEX
forever!