Mongez React Atom Part-4

Mohamed Eltahawy
Nov 18, 2023
2 min read
post_comment0 Comments
post_like0 Likes

#Get Atom single key value


If atom's value is an object, we can get a value from the atom directly usingatom.getfunction.

import { atom } from "@mongez/atom-react"; const userAtom = atom({ key: "user", default: { key: "Hasan", address: { city: "New York", }, }, }); console.log(userAtom.get("key")); // Hasan

Dot Notation is also supported.

console.log(userAtom.get("address.city")); // New York

If key doesn't exist, return default value instead.

console.log(userAtom.get("email", "default@email.com")); // default@email.com

#Reset value

This feature might be useful in some scenarios when we need to reset the atom's value to its default value.

// anywhere in your app import { currencyAtom } from "~/src/atoms"; currencyAtom.reset(); // any component using the atom will be rerendered automatically.

This will trigger an atom update and set the atom's value to its default value.

#Silent Reset Value (Reset without triggering change event)

Added in v3.2.0 >

Sometimes its useful to reset the atom's value to its default value without triggering the change event, this can be achieved usingsilentResetmethod, a good sue case for this is when a component is unmounted and you want to reset the atom's value to its default value without triggering the change event.

// Header.tsx import { currencyAtom } from "~/src/atoms"; import { useEffect } from "react"; export default function Header() { const currency = currencyAtom.useValue(); useEffect(() => { return () => currencyAtom.silentReset(); }, []); return ( <>

Header

Currency: {currency} ); }

This will not trigger the value change event, but it will reset the atom's value to its default value and the reset event will be triggered though

#Destroy atom

We can also destroy the atom usingdestroy()method from the atom, this will stop re-rendering any component that using the atom usinguseAtomoruseAtomStatehooks.

// anywhere in your app import { currencyAtom } from "~/src/atoms"; currencyAtom.destroy();

#Getting atom key

To get the atom key, useatom.keywill return the atom key.

// anywhere in your app import { currencyAtom } from "~/src/atoms"; console.log(currencyAtom.key); // currencyAtom

#Getting all atoms

To list all registered atoms, useatomsListutility for that purpose.

// anywhere in your app import { atomsList } from "~/src/atoms"; console.log(atomsList()); // [currencyAtom, ...]

#Get handler function

Sometimes we may need to handle theatom.getfunction to get the data in a customized way, we can achieve this by defining in the atom function call how the atom will retrieve the object's value.

Without Defining theatom getter

const settingsAtom = atom({ key: "user", default: { isLoaded: false, settings: {}, }, }); // later settingsAtom.update({ isLoaded: true, settings: { websiteName: "My Website Name", }, }); console.log(userAtom.get("settings.websiteName")); // My Website Name

After Defining it

import { atom } from "@mongez/atom-react"; const settingsAtom = atom({ key: "settings", default: { isLoaded: false, settings: {}, }, get(key: string, defaultValue: any = null, atomValue: any) { return atomValue[key] !== undefined ? atomValue[key] : atomValue.settings[key] !== undefined ? atomValue.settings[key] : defaultValue; }, }); // later settingsAtom.update({ isLoaded: true, settings: { websiteName: "My Website Name", }, }); console.log(settingsAtom.get("websiteName")); // My Website Name

Wait for more, to be continued !