Mongez React Atom: A brand new React state administration on the town

Mongez React Atom

Mongez React Atom (MRA) is a state administration instrument to handle knowledge between Mission’s Elements

Why?

The principle function of the start of this bundle is to work with a easy and performant state administration instrument to deal with knowledge amongst parts.

Options

The highest options of MRA is:

• Light-weight bundle: 24KB Unpacked.
• Can be utilized in every single place, inside or outdoors React Elements.
• Simple to make use of.
• Simple to be taught.

The way it works

The idea is easy, the whole lot works in atoms, every atom SHOULD maintain a single worth, in nutshell each atom has a single accountability.

Set up

yarn add @mongez/react-atom

Or

npm i @mongez/react-atom

Utilization

Let’s create a brand new atom

src/atoms/currency-atom.ts

import { atom } from '@mongez/react-atom';

const currencyAtom = atom({
  identify: 'forex', // required and ought to be distinctive.
  default: 'USD', // default worth for the atom
});

export default currencyAtom;

Let’s examine what we have right here,

The atom perform creates a brand new atom object, it accepts an object, which holds two required keys:

1. identify the atom’s identify, as talked about earlier it have to be distinctive for every atom, in any other case an error shall be raised within the improvement setting.

2. default holds the default worth, it may be any kind.

Now the atom is prepared for use in our React parts.

Get the atom’s worth

Let’s replace our header to show the present forex.

src/parts/Header.tsx

import currencyAtom from "src/atoms/currency-atom";

export default perform Header() {
  const forex = currencyAtom.worth;
  return (
    <>
      <div>Present Forex: {forex}</div>
    </>
  );
}

This may output: Forex: USD

We used currencyAtom.worth to get the present worth of the atom.

Replace the atom’s worth

Let’s go additional step and replace the atom of the forex.

import currencyAtom from "src/atoms/currency-atom";

export default perform Header() {
  const forex = currencyAtom.worth;
  return (
    <>
      <div>Present Forex: {forex}</div>
      <button onClick={() => currencyAtom.replace("USD")}>USD</button>
      <button onClick={() => currencyAtom.replace("EUR")}>EUR</button>
      <button onClick={() => currencyAtom.replace("EGP")}>EGP</button>
    </>
  );
}

The currencyAtom.replace will replace the atom’s worth, nevertheless this is not going to re-render the element.

The Atom State

Now let’s examine a situation that we have a forex dropdown in our Header and one other one is the Footer.

The trick right here not solely to re-render solely the Header and the Footer solely with out rendering all the format, which reduction us from utilizing The Context Hook.

src/parts/Header.tsx

import currencyAtom from "src/atoms/currency-atom";
import { useAtom } from "@mongez/react-atom";

export default perform Header() {
  const [currency, setCurrency] = useAtom(currencyAtom);

  return (
    <>
      <div>Present Forex: {forex}</div>
      <button onClick={() => setCurrency("USD")}>USD</button>
      <button onClick={() => setCurrency("EUR")}>EUR</button>
      <button onClick={() => setCurrency("EGP")}>EGP</button>
    </>
  );
}

We used useAtom hook to get forex from the forex atom and to a state updater to replace the atom’s worth.

It really works precisely like useState however the trick right here it updates each element that listens to the atom.

Let’s create a Footer element that take heed to the forex atom’s worth

src/parts/Footer.tsx

import currencyAtom from "src/atoms/currency-atom";
import { useAtom } from "@mongez/react-atom";

export default perform Footer() {
  const [currency] = useAtom(currencyAtom);

  return (
    <>
      <div>Present Forex: {forex}</div>
      <h1>That is footer</h1>
    </>
  );
}

Now each time the forex’s worth is up to date, the Footer element shall be re-rendered for every replace.

The Atom Worth

One other solution to take heed to the atom’s worth is utilizing useAtomValue hook as an alternative of useAtom

src/parts/Footer.tsx

import currencyAtom from "src/atoms/currency-atom";
import { useAtomValue } from "@mongez/react-atom";

export default perform Footer() {
  const forex = useAtomValue(currencyAtom);

  return (
    <>
      <div>Present Forex: {forex}</div>
      <h1>That is footer</h1>
    </>
  );
}

Alternatively, we will get the worth state immediately from the atom itself utilizing useValue hook

import currencyAtom from "src/atoms/currency-atom";

export default perform Footer() {
  const forex = currencyAtom.useValue();

  return (
    <>
      <div>Present Forex: {forex}</div>
      <h1>That is footer</h1>
    </>
  );
}

Within the subsequent publish we’ll see find out how to work with atoms as objects and find out how to pay attention for single worth change of the atom’s objects utilizing the atom watchers.

To Be Continued…