atomicky v1.7.0

Atomicky

Flexible state management

Atoms

atom(state): Atom

import { atom } from "atomicky";

// create new atom
const countAtom = atom(0);
// change state
countAtom.setState(2);
// change state with callback function
countAtom.setState((previousCount) => previousCount + 1);

const userAtom = atom({ name: "Stad", age: 2 });
// updating objects directly will merge with previous state
userAtom.setState({ age: 3 }); // { name: "Stad", age: 3 }
// using update function needs to provide the whole object
userAtom.setState((prevState) => ({
  ...prevState,
  age: 4,
}));
// get state
const count = countAtom.getState(); // count === 3
// listen for changes to state
const unsubscribe = countAtom.subscribe(() => {
  // do something with new state
  const count = countAtom.getState();
});
// stop listening for changes
unsubscribe();
// reset to default state
countAtom.reset();

httpAtom(state): Atom

contains an additional http state

{
  init: true,
  loading: false,
  loaded: false,
  error: false,
  errorMessage: undefined,
}

it provides addition functionallities to manage both states

import { httpAtom } from "atomicky";

// create new http atom
const countAtom = httpAtom(0);
// getState returns a tuple both states
const [count, httpState] = countAtom.getState();
// get atom state only
const count = countAtom.getCoreState();
// get http state only
const httpState = countAtom.getHttpState();
// update http state - will override previus state
countAtom.setHttpState({ loading: true }); // { loading: true, init: false, error: false, ... }
// update both state
countAtom.setHttpState({ loaded: true }, 4); // count === 4
// handle errors
countAtom.setHttpState({ error: true, errorMessage: "..." });
// reset - will reset both state and httpState
countAtom.reset(); // ({ init: true, loading: false, ... })
// you can also provide httpState to reset to
countAtom.reset({ loaded: true }); // ({ init: false, loaded: true, ... })

Hooks

useAtom(Atom): state

import { httpAtom, atom, useAtom } from "atomicky";

const nameAtom = httpAtom("Stad");
const countAtom = atom(0);
// listen for state changes and rerender component
const [name, { loading }] = useAtom(nameAtom);
const count = useAtom(countAtom);

Utils

waitForAtom(atom, selector): Promise

import { httpAtom, waitForAtom } from "../src/.";

const userAtom = httpAtom({ name: undefined });

const fetchUser = async () => {
  const { loading } = userAtom.getHttpState();

  // don't fetch if already fetching
  if (loading) {
    // wait for original fetch to finish
    await waitForAtom(userAtom, ([, { loaded }]) => loaded);
    // return fetch data
    return userAtom.getCoreState();
  }

  // Fetch user... and update atom
  userAtom.setHttpState({ loaded: true }, user);
};

waitForAtoms(atom, selector): Promise

import { waitForAtoms } from "../src/.";

waitForAtoms(
  [atom1, atom2],
  ([[atom1Data, atom1HttpStatus], [atom2Data, atom2HttpStatus]]) =>
    atom1HttpStatus.loaded || atom1HttpStatus.loaded
).then(() => {});