مدیریت دولت اتمی چیست – خودتان بسازید

// Example from jotai.org
const animeAtom = atom(animeAtom);

const Header = () => {
  const [anime, setAnime] = useAtom(animeAtom)
  ...
}

let atomId = 0;

function atomFactory(payload) {
  const atom = {};

  const subscribers = new Map();

  let subscriberIds = 0;

  const key = atomId++;

  // This function returns the current value
  atom.get = function () {
    return atom.value;
  };

  // sets value and notify to subscribers
  atom.set = function (value) {
    atom.value = value;
    notify(value);
  };

  // notifier function to notify value
  function notify(value) {
    subscribers.forEach((subscriber) => {
      subscriber(value);
    });
  }

  // subscribe to changes; returns unsubscribe fn
  atom.subscribe = function (fn, initialId) {
    const id = initialId ?? (subscriberIds += 1);

    subscribers.set(id, fn);

    return () => void subscribers.delete(id);
  };

  // actual atom value
  atom.value = payload;

  return atom;
}

export { atomFactory as atom }

// atom returned by factory fn

{
    get: () => void
    set: (value: any) => void
    subscribe: () => (() => void)
}

export function useAtom(atom) {
  const [state, setState] = useState(atom.get());

  useEffect(() => {
    // subscribe on mount and sets local state with new value (used for sync atom to reacts state)
    const unSubscribe = atom.subscribe(setState);

    // unsubscribe on unmount
    return () => unSubscribe();
  }, [atom]);

  // just setter function.
  const setAtomValue = useCallback((value) => atom.set(value), [atom]);

  return [state, setAtomValue];
}

// useAtomValue
export function useAtomValue(atom) {
  const [state, setState] = useState(atom.get());

  useEffect(() => {
    const unSubscribe = atom.subscribe(setState);
    return () => unSubscribe();
  }, [atom]);

  return state;
}

// useAtomSetter
export function useAtomSetter(atom) {
  return useCallback((value) => atom.set(value), [atom]);
}

export function useAtom(atom) {
  return [useAtomValue(atom), useAtomSetter(atom)];
}

// Example from jotai.org
const animeAtom = atom('bleach');

const Header = () => {
  const [anime, setAnime] = useAtom(animeAtom)
  ...
}

// refactored atom factory fn
function atomFactory(payload) {
  const atom = {};

  const subscribers = new Map();

  let subscriberIds = 0;

  const key = atomId++;

  // getAtom function used to subscribe to another atom (for derived state)
  atom.getAtom = function (prevAtom) {
    prevAtom.subscribe(() => {
      if (payload instanceof Function) {
        atom.value = payload(atom.getAtom);
        notify(atom.value);
      }
    }, `atom_${key}`);

    return prevAtom.get();
  };

  atom.get = function () {
    return atom.value;
  };

  atom.set = function (value) {
    atom.value = value;
    notify(value);
  };

  function notify(value) {
    subscribers.forEach((subscriber) => {
      subscriber(value);
    });
  }

  atom.subscribe = function (fn, initialId) {
    const id = initialId ?? (subscriberIds += 1);

    subscribers.set(id, fn);

    return () => void subscribers.delete(id);
  };

  // check if the payload is a function (derived atom) or normal atom
  if (payload instanceof Function) {
    atom.value = payload(atom.getAtom);
  } else {
    atom.value = payload;
  }

  return atom;
}

export { atomFactory as atom }

import { atom, useAtom, useAtomValue } from './lib';

const priceAtom = createAtom(15);

const discountAtom = createAtom(10);

const discountedPriceAtom = createAtom((get) => {
    return (get(priceAtom) / 100) * get(discountAtom);
});

const Component = () => {
  const [price, setPrice] = useAtom(priceAtom);

  const discountedPrice = useAtomValue(discountedPriceAtom);
  ...
}

import { atom } from "./lib";

export function atomWithLocalStorage(key, payload) {
  //Create new atom
  const newAtom = atom(payload);

  // check value exists in localstorage or not
  const prevVal = JSON.parse(localStorage.getItem(key) || "null");

  if (prevVal) {
    // if the value exists in localstorage sets to atom
    newAtom.set(prevVal.data);
  }

  // subscribe to changes and set value in localstorage
  newAtom.subscribe((val) =>
    localStorage.setItem(key, JSON.stringify({ data: val }))
  );

  return newAtom;
}