'Jotai' Best practices
I've been exploring Jotai to grasp its capabilities and use cases. I created a basic application for filtering a list and adding and removing items from it. Seeking opinions on whether my implementation aligns with best practices and effectively leverages Jotai's functionalities.
Store
display stuff
adding stuff
Store
export const trainingPhraseAtom = atom("");
export const filterAtom = atom("");
export const trainingPhrasesAtom = atom<trainingPhraseType[]>([]);
export const addTraningPhraseAtom = atom(null, (get, set) => {
set(
trainingPhrasesAtom,
addTrainingPhrase(get(trainingPhrasesAtom), get(trainingPhraseAtom))
);
set(trainingPhraseAtom, "");
});
export const filteredTrainingPhaseAtom = atom<trainingPhraseType[]>((get) => {
return filterTrainingPhase(get(trainingPhrasesAtom), get(filterAtom));
});
export const removeTrainingPhraseAtom = atom(null, (get, set, id: number) => {
set(trainingPhrasesAtom, deleteTrainingPhrase(get(trainingPhrasesAtom), id));
});export const trainingPhraseAtom = atom("");
export const filterAtom = atom("");
export const trainingPhrasesAtom = atom<trainingPhraseType[]>([]);
export const addTraningPhraseAtom = atom(null, (get, set) => {
set(
trainingPhrasesAtom,
addTrainingPhrase(get(trainingPhrasesAtom), get(trainingPhraseAtom))
);
set(trainingPhraseAtom, "");
});
export const filteredTrainingPhaseAtom = atom<trainingPhraseType[]>((get) => {
return filterTrainingPhase(get(trainingPhrasesAtom), get(filterAtom));
});
export const removeTrainingPhraseAtom = atom(null, (get, set, id: number) => {
set(trainingPhrasesAtom, deleteTrainingPhrase(get(trainingPhrasesAtom), id));
});display stuff
import { removeTrainingPhraseAtom, filteredTrainingPhaseAtom } from "./store";
import { useAtomValue, useSetAtom } from "jotai";
function DisplayTrainingPhase() {
const trainingPhraseList = useAtomValue(filteredTrainingPhaseAtom);
const removeTrainingPhrase = useSetAtom(removeTrainingPhraseAtom);
return (
<>
{trainingPhraseList.map((e) => {
return (
<div key={e.id}>
{e.trainingPhrase}
<button onClick={() => removeTrainingPhrase(e.id)}>delete</button>
</div>
);
})}
</>
);
}import { removeTrainingPhraseAtom, filteredTrainingPhaseAtom } from "./store";
import { useAtomValue, useSetAtom } from "jotai";
function DisplayTrainingPhase() {
const trainingPhraseList = useAtomValue(filteredTrainingPhaseAtom);
const removeTrainingPhrase = useSetAtom(removeTrainingPhraseAtom);
return (
<>
{trainingPhraseList.map((e) => {
return (
<div key={e.id}>
{e.trainingPhrase}
<button onClick={() => removeTrainingPhrase(e.id)}>delete</button>
</div>
);
})}
</>
);
}adding stuff
function AddTrainingPhase() {
const [trainingPhraseVal, setTrainingPhrase] = useAtom(trainingPhraseAtom);
const setFilterAtom = useSetAtom(filterAtom);
const addTrainingPhrase = useSetAtom(addTraningPhraseAtom);
return ...
}function AddTrainingPhase() {
const [trainingPhraseVal, setTrainingPhrase] = useAtom(trainingPhraseAtom);
const setFilterAtom = useSetAtom(filterAtom);
const addTrainingPhrase = useSetAtom(addTraningPhraseAtom);
return ...
}
