'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
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));
});
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>
);
})}
</>
);
}
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
bump