React: you remove the PROPS!

In my experience the big problem I had by switching to REACT
is that it does not propose a global pattern to manage the business logic.

I have reviewed code where data and callbacks
have passed to an infinite series of components.
Any modification was a pain, especially to move a component out of its hierarchy.

REDUX is very interesting but too verbose for my style.

REACT provides "native" tools:
PROVIDER and REDUCER

but, in my opinion, they are too basic to use them directly.

So I wrote a "utility" (NOT a "library") served in several projects
very very light.

[https://github.com/priolo/jon]

Basic example:

Create STORE

my_app/myStore.js

export default {
    state: {
        value: "init value",
    },
    getters: {
        getUppercase: (state) => state.value.toUpperCase(),
    },
    actions: {
        fetch: async (state, payload, store) => {
            //const {response} = await ajax.get(`my_server`)
            //store.setValue(response)
        }
    },
    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/iistore';
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/iistore";
import React from "react";

export default function App() {

  const { state, setValue, getUppercase } = useStore("myStore")

  return (<div>
      <h1>{state.value}</h1><h2>{getUppercase()}</h2>
      <input onChange={(e)=>setValue(e.target.value)} />
  </div>);
}

online

Hope it's useful, I'm a huge fan of VUEX which I got my inspiration from
Bye!

---

Pssss...

However if (like me) you hate using too many external libraries
because you don't really know what they do
Check out this article:
REACT and STORE with HOOKS
It is "almost" the same thing directly with "Providers" and "useReducer"

Comments

[Nguyễn Trọng Vĩnh]

There're many alternative like constate and unstated.
You should have a look.

[priolo22]

I looked at "constate" I didn't know him, thanks.
It is really interesting! It sounds very simple and effective!
It basically puts a hook in a provider
and makes it available to the whole project.
I should try it, but I don't understand if it's possible to use it outside of a react component
It would be useful when external processes that need to interact with the interface
The only thing I don't like is that it gives "too much freedom of interpretation"
That is, it doesn't set a standard scheme to use
Of course this could also be an advantage

[priolo22]

I also looked at "unstated"
maybe I didn't spend enough time on it
I am an OOP lover !!! But frankly in "REACT"
not using "hooks" seems wrong to me

[Sean]

Well thought out. Gets rid of the verbose nature of most state libraries and kind of gets to the point. Uses the store, reducer, and action cycle with the compact nature of react. Very nice. I'll use it in a future project. 😄

[priolo22]

Thanks! However if (like me) you hate using too many external libraries
because you don't really know what they do
Check out this article:
REACT and STORE with HOOKS
It is "almost" the same thing directly with "Providers" and "useReducer"