I've just published jotai-wrapper, a super tiny and simple utility library that makes using jotai even simpler. It comes from the necessity to migrate a project with react-context-slices to jotai. Both libraries share a similar API. While in react-context-slices you have the useSlice
hook, in jotai you have the useAtom
, useSetAtom
, and useAtomValue
hooks. In react-context-slices you define either React Context or Redux slices, while in jotai you define atoms. The need for the migration from the first to the second was a high memory usage by react-context-slices when using React Context slices.
The API
jotai-wrapper default exports a function, getAPIFromAtoms
. To use it you must define an atoms.js
file in your project, like this:
// atoms.js
import { atom } from "jotai";
import getAPIFromAtoms from "jotai-wrapper";
export const { useAtom, useSetAtom, useAtomValue, getAtom, selectAtom } =
getAPIFromAtoms({
counter: atom(0),
todos: atom([]),
messagesLastFoundId: atom(-1),
invitationsLastFoundId: atom(-1),
// rest of atoms
});
As you can see this function, getAPIFromAtoms
, gives us three hooks and two functions.
useAtom
, useSetAtom
, and useAtomValue
These three hooks behave the same as in jotai, but you pass to them a string instead of an atom (you can still pass them an atom if you wish). For example:
// counter.js
import {useAtom} from "./atoms";
export default function Counter(){
const [counter,setCounter]=useAtom("counter");
return <>
<button onClick={()=>setCounter(c=>c+1)}>+</button>{counter}
<>;
}
The fact to use strings instead of atoms in the this three hooks allows for dynamic referencing, like this:
// use-last-found-id.js
import { useSetAtom } from "./atoms";
export function useLastFountId({ prefix }) {
const setLastFoundId = useSetAtom(`${prefix}LastFoundId`);
// ...
}
getAtom
and selectAtom
These are the other two functions returned by the call to getAPIFromAtoms
in atoms.js
file.
getAtom
simply returns the atom wich the string we pass refers to. For example: const counterAtom = getAtom("counter");
.
selectAtom
is more useful. We use it like this:
// todos.js
import { selectAtom, useAtomValue } from "./atoms";
import { useMemo } from "react";
export default function Todos({ index, id }) {
const todoAtIndex = useAtomValue(
useMemo(() => selectAtom("todos", (todos) => todos[index]), [index])
);
const todoWithId = useAtomValue(
useMemo(
() =>
selectAtom("todos", (todos) => todos.find((todo) => todo.id === id)),
[id]
)
);
//...
}
It's important to note that this selectAtom
function returned by the call to getAPIFromAtoms
in atoms.js
file is different than the selectAtom
from jotai. To use the selectAtom
from jotai you must import it like this: import {selectAtom} from "jotai/utils";
.
Summary
So this is it. You can use jotai with jotai-wrapper in a simpler way. Thanks for reading.
Top comments (0)