Mikä on atomaarinen tilamallia (Jotai/Recoil)?

Question

Accepted Answer

Atomaarinen tilamalli (Jotai, Recoil) rakentaa globaalin tilan monista pienistä, itsenäisistä yksiköistä nimeltään **atomit**, jotka kootaan alhaalta ylöspäin — kuin yksi suuri ylhäältä alas rakentava kauppa (Redux) tai monolitaarinen konteksti. Komponentit tilaavat yksittäisiä atomeja ja uudelleenrenderöivät vain kun *nämä* muuttuvat. ## Atomit — tilayksiköiden pienin muoto ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a primitive atom — one piece of state const nameAtom = atom("Ann"); // another, independent ``` Jokainen atomi on itsenäinen tilapalanen. Luot niitä niin monta kuin tarvitset, jokainen osoitettavissa omalla tavallaan. ## Johdetut atomit — koostumus ```jsx // a derived atom computes from other atoms; recomputes when its dependencies change const doubleAtom = atom((get) => get(countAtom) * 2); const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`); // writable derived atom const upperNameAtom = atom( (get) => get(nameAtom).toUpperCase(), (get, set, newVal) => set(nameAtom, newVal.toLowerCase()), ); ``` Atomit koostuvat riippuvuusverkoksi — johdetut atomit päivittyvät automaattisesti kun atomit, joista ne lukevat, muuttuvat, kuten laskentataulukko. ## Atomien käyttäminen — tuntuu kuin useState, mutta globaali ```jsx function Counter() { const [count, setCount] = useAtom(countAtom); // global, but useState-like API return ; } function Display() { const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes } ``` ## Atomaarinen (alhaalta ylöspäin) vai kauppa (ylhäältä alas) ```text Redux (top-down): one big state tree; you carve slices/selectors OUT of it Atomic (bottom-up): start with tiny atoms; compose them UP into derived state Granularity: each atom is independently subscribable → naturally fine-grained re-renders (a component using countAtom ignores nameAtom changes) ``` ## Edut ja kompromissit ```text ✓ Fine-grained re-renders by default (subscribe to exactly the atoms you use) ✓ No selector boilerplate; derived state is just another atom ✓ Solves Context's "re-render everything" problem ✓ Great for state that's naturally decomposed into many independent pieces ✗ Many atoms can be harder to organize/trace than one centralized store ✗ Less rigid structure than Redux (a pro or con depending on the team) ``` ## Miksi sillä on merkitystä Atomaarinen malli on erillinen, yhä suositumpi lähestymistapa globaaliin tilaan, joka kääntää Reduxin ylhäältä alas rakentavan rakenteen: pienten atomien kokoonpanon sijaan suuresta kaupasta leikkaamisen. Sen sisäänrakennettu rakeisuus antaa tehokkaan, kohdennettuja uudelleenrenderöintejä ilman valitsimia — suoraan käsittelemässä Contextin suorituskykykysymyksiä. Atomien ymmärtäminen (ja johdetut atomit) täydentää tietoasi tilahallinnan suunnitteluavaruudesta, rinnakkain yksittäisen kaupan (Redux/Zustand) ja reaktiivisen (MobX/Signals) mallien kanssa, auttaen sinua valitsemaan paradigman, joka parhaiten sopii sovelluksen tilamuotoon.