'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
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 ...
}
1 Reply
MagicEmperor
MagicEmperor9mo ago
bump
Want results from more Discord servers?
Add your server