DEV Community

priolo22
priolo22

Posted on • Updated on

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 }),
    },
}
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/iistore';
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/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>);
}
Enter fullscreen mode Exit fullscreen mode

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"

Discussion (5)

Collapse
ntvinhit profile image
Nguyễn Trọng Vĩnh

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

Collapse
priolo22 profile image
priolo22 Author • Edited on

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

Collapse
priolo22 profile image
priolo22 Author

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

Collapse
seanolad profile image
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. 😄

Collapse
priolo22 profile image
priolo22 Author

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"