Kas tas Legend-State ir kodėl turėtum jį išbandyti
Jei dirbi su React, tikrai žinai, kad state valdymas gali tapti tikru galvos skausmu. Redux, MobX, Zustand, Jotai – pasirinkimų tiek daug, kad kartais norisi tiesiog grįžti prie paprastų useState ir Context API. Bet štai atsiranda Legend-State, kuris žada būti ne tik greičiausias, bet ir paprasčiausias state valdymo sprendimas React ekosistemoje.
Legend-State – tai reaktyvi state valdymo biblioteka, kuri sujungia geriausius MobX ir Solid.js pasaulio elementus, tačiau pritaikyta būtent React. Pagrindinė jos filosofija – kuo mažiau boilerplate kodo, maksimalus našumas ir intuityvus API. Kūrėjai teigia, kad jų biblioteka gali būti iki 10 kartų greitesnė už kitus populiarius sprendimus, o tai nėra tuščias garsas.
Kas įdomiausia – Legend-State nereikalauja jokių wrapper komponentų, provider’ių ar sudėtingos setup’o procedūros. Tiesiog sukuri observable objektą ir pradedi jį naudoti. Tai primena senųjų gerųjų laikų paprastumą, kai React dar nebuvo apkrautas tonomis abstrakčių koncepcijų.
Kaip tai veikia praktiškai
Pažiūrėkime į paprastą pavyzdį. Tradiciškai su useState tai atrodytų taip:
„`javascript
const [user, setUser] = useState({ name: ‘Jonas’, age: 25 });
// Norint atnaujinti
setUser({ …user, age: 26 });
„`
Su Legend-State tas pats atrodo šitaip:
„`javascript
import { observable } from ‘@legendapp/state’;
const user$ = observable({ name: ‘Jonas’, age: 25 });
// Atnaujinimas
user$.age.set(26);
„`
Matai skirtumą? Nereikia jokio spread operatoriaus, nereikia galvoti apie immutability – tiesiog keiti reikšmę. Dolerinis ženklas pavadinimo gale yra tik konvencija, kuri padeda atskirti observable objektus nuo paprastų. Gali naudoti bet kokį kitą pavadinimą.
Bet tikrasis magija prasideda, kai nori naudoti šį state komponente:
„`javascript
function UserProfile() {
const name = user$.name.get();
const age = user$.age.get();
return
;
}
„`
Arba dar paprasčiau su `useObservable` hook’u:
„`javascript
function UserProfile() {
const user = useObservable(user$);
return
;
}
„`
Komponentas automatiškai re-render’insis tik tada, kai pasikeičia tie laukai, kuriuos jis naudoja. Jei kažkas kitur pakeičia `user$.email`, o tavo komponentas jo nenaudoja – re-render’o nebus. Tai vadinama fine-grained reactivity, ir būtent dėl to Legend-State toks greitas.
Persistence ir sinchronizacija su backend’u
Viena iš stipriausių Legend-State pusių – integruotas persistence mechanizmas. Daugelis aplikacijų turi išsaugoti state localStorage, IndexedDB ar sinchronizuoti su serveriu. Paprastai tam reikia rašyti krūvą papildomo kodo, bet čia viskas jau paruošta.
Pavyzdžiui, norėdamas išsaugoti state į localStorage:
„`javascript
import { observable } from ‘@legendapp/state’;
import { persistObservable } from ‘@legendapp/state/persist’;
const settings$ = observable({ theme: ‘dark’, language: ‘lt’ });
persistObservable(settings$, {
local: ‘app-settings’
});
„`
Ir viskas. Dabar kiekvieną kartą, kai pasikeičia `settings$`, jis automatiškai išsaugomas į localStorage. Kai vartotojas grįžta į aplikaciją – state atkuriamas automatiškai.
Dar įdomiau su backend sinchronizacija. Legend-State turi integruotą CRUD sistemą, kuri leidžia labai elegantiškai dirbti su API:
„`javascript
const todos$ = observable(
syncedCrud({
list: () => fetch(‘/api/todos’).then(r => r.json()),
create: (todo) => fetch(‘/api/todos’, {
method: ‘POST’,
body: JSON.stringify(todo)
}),
update: (todo) => fetch(`/api/todos/${todo.id}`, {
method: ‘PUT’,
body: JSON.stringify(todo)
}),
delete: (id) => fetch(`/api/todos/${id}`, { method: ‘DELETE’ })
})
);
„`
Dabar gali dirbti su `todos$` tarsi tai būtų paprastas lokalus state, o viskas automatiškai sinchronizuojasi su serveriu. Biblioteka pati tvarko optimistic updates, retry logika, konfliktų sprendimą ir kitas sudėtingas detales.
Computed reikšmės ir reakcijos
Kaip ir kituose reaktyviuose sprendimuose, Legend-State leidžia kurti computed reikšmes, kurios automatiškai perskaičiuojamos, kai pasikeičia jų priklausomybės:
„`javascript
const cart$ = observable({
items: [
{ name: ‘Knyga’, price: 15, quantity: 2 },
{ name: ‘Pieštukas’, price: 2, quantity: 5 }
]
});
const total$ = computed(() => {
return cart$.items.get().reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);
});
console.log(total$.get()); // 40
„`
Kai pasikeičia bet kuris cart item’as, `total$` automatiškai perskaičiuojamas. Nereikia jokių `useMemo` ar panašių dalykų – viskas veikia automatiškai.
Taip pat gali sukurti reakcijas, kurios vykdomos, kai pasikeičia tam tikros reikšmės:
„`javascript
observe(() => {
const total = total$.get();
if (total > 100) {
console.log(‘Nemokamas pristatymas!’);
}
});
„`
Ši funkcija bus vykdoma kiekvieną kartą, kai pasikeis `total$` reikšmė. Tai labai patogu įvairiems side effect’ams – analytics, notifications, logging ir pan.
Našumo optimizacijos ir best practices
Nors Legend-State ir taip yra greitas, yra keletas dalykų, kuriuos žinant gali išspausti dar daugiau našumo.
Pirma, venkite nereikalingų `.get()` iškvietimų. Kiekvieną kartą, kai kvieti `.get()`, sukuriamas subscription į tą observable. Jei naudoji reikšmę tik vieną kartą ir ji daugiau nesikeičia, geriau naudoti `.peek()`:
„`javascript
// Blogai – sukuria subscription
const id = user$.id.get();
fetch(`/api/users/${id}`);
// Gerai – tik perskaito reikšmę
const id = user$.id.peek();
fetch(`/api/users/${id}`);
„`
Antra, naudokite `batch()` funkcija, kai atliekate kelis atnaujinimus iš karto:
„`javascript
import { batch } from ‘@legendapp/state’;
batch(() => {
user$.name.set(‘Petras’);
user$.age.set(30);
user$.email.set(‘[email protected]’);
});
„`
Taip visi pakeitimai bus sugrupuoti į vieną update ciklą, ir komponentai re-render’insis tik vieną kartą, o ne tris.
Trečia, kai dirbi su dideliais sąrašais, naudok `For` komponentą vietoj paprastų map funkcijų:
„`javascript
import { For } from ‘@legendapp/state/react’;
function TodoList() {
return (
{(todo$) => (
)}
);
}
„`
`For` komponentas optimizuotas dirbti su observable masyvais ir užtikrina, kad tik pakeisti elementai bus re-render’inti, o ne visas sąrašas.
TypeScript palaikymas
Legend-State puikiai dirba su TypeScript ir turi pilną type safety. Kai sukuri observable objektą, visi jo tipai automatiškai inferuojami:
„`javascript
interface User {
id: number;
name: string;
email: string;
settings: {
theme: ‘light’ | ‘dark’;
notifications: boolean;
};
}
const user$ = observable
id: 1,
name: ‘Jonas’,
email: ‘[email protected]’,
settings: {
theme: ‘dark’,
notifications: true
}
});
// TypeScript žino, kad tai string
const name = user$.name.get();
// TypeScript žino, kad tai ‘light’ | ‘dark’
const theme = user$.settings.theme.get();
// Klaida – ‘blue’ nėra validus theme
user$.settings.theme.set(‘blue’); // Type error!
„`
Tai ypač naudinga dirbant su sudėtingomis duomenų struktūromis – gauni autocomplete, type checking ir refactoring support visur.
Migracija iš kitų sprendimų
Jei jau naudoji Redux, Zustand ar kitą state valdymo biblioteką, migracija į Legend-State gali atrodyti bauginanti. Bet iš tikrųjų tai gana paprasta, nes gali migruoti palaipsniui.
Pavyzdžiui, jei naudoji Redux, gali pradėti nuo mažų dalių:
„`javascript
// Senas Redux store
const store = createStore(rootReducer);
// Naujas Legend-State
const newFeature$ = observable({
data: [],
loading: false
});
// Gali naudoti abu kartu tame pačiame komponente
function MyComponent() {
const oldData = useSelector(state => state.oldFeature);
const newData = newFeature$.data.get();
return
;
}
„`
Palaipsniui gali perkelti vis daugiau state į Legend-State, kol galiausiai galėsi visiškai atsikratyti Redux.
Jei naudoji Context API, migracija dar paprastesnė. Tiesiog pakeiti Context Provider į observable:
„`javascript
// Buvo
const UserContext = createContext();
function App() {
const [user, setUser] = useState(null);
return (
);
}
// Tapo
const user$ = observable(null);
function App() {
return
}
„`
Nereikia jokių provider’ių – tiesiog importuoji `user$` ten, kur reikia.
Realūs panaudojimo atvejai ir kada verta rinktis
Legend-State puikiai tinka įvairiems projektams, bet yra situacijos, kai jis ypač spindi.
Real-time aplikacijos – jei kuri chat’ą, collaborative editing tool’ą ar bet ką, kur duomenys nuolat keičiasi, fine-grained reactivity užtikrina, kad tik tikrai pakeisti dalykai bus atnaujinti ekrane. Tai kritiškai svarbu našumui.
Formos su daug laukų – tradiciškai kiekvienas form input’o pakeitimas triggerina viso form komponento re-render’ą. Su Legend-State kiekvienas laukas gali būti atskiras observable, ir re-render’insis tik tas input’as, kuris keičiasi.
Offline-first aplikacijos – integruotas persistence mechanizmas su optimistic updates puikiai tinka aplikacijoms, kurios turi veikti ir be interneto ryšio.
Sudėtingos dashboards – kai turi daug komponentų, kurie rodo skirtingus tos pačios duomenų struktūros aspektus, Legend-State užtikrina, kad kiekvienas komponentas re-render’insis tik tada, kai pasikeičia jo naudojami duomenys.
Tačiau yra ir situacijų, kai galbūt verta apsvarstyti kitus sprendimus. Jei tavo aplikacija labai maža ir paprasta, paprastas useState gali būti visiškai pakankamas. Jei dirbi su labai dideliu team’u, kuris jau turi gilią Redux patirtį ir setup’ą, migracija gali būti per daug costly. Jei naudoji kitus framework’us be React (nors Legend-State turi ir vanilla JS API), gali būti geresnių alternatyvų.
Ką reikia žinoti prieš pradedant
Legend-State yra santykinai nauja biblioteka, todėl ekosistema dar nėra tokia brandi kaip Redux ar MobX. Tai reiškia, kad gali susidurti su mažiau community plugin’ų, mažiau Stack Overflow atsakymų ir mažiau tutorial’ų.
Dokumentacija yra gera, bet ne tokia išsami kaip norėtųsi. Kai kurie advanced use case’ai nėra gerai aprašyti, ir tenka tyrinėti source code’ą arba eksperimentuoti pačiam.
Taip pat verta paminėti, kad nors biblioteka teigia esanti greičiausia, realūs performance gains priklauso nuo tavo konkretaus use case’o. Jei tavo aplikacija ir taip veikia gerai su dabartinu sprendimu, našumo pagerinimas gali būti nepastebimai mažas.
Bet jei nori išbandyti ką nors naujo, vertini paprastumą ir elegantišką API, Legend-State tikrai vertas dėmesio. Pradėti galima labai greitai – tiesiog `npm install @legendapp/state` ir pradedi naudoti. Nereikia jokio sudėtingo setup’o, nereikia keisti visos aplikacijos architektūros.
Galutinis patarimas – pabandyk mažame projekte ar feature’e. Sukurk paprastą todo list’ą ar settings page’ą su Legend-State ir pažiūrėk, kaip jaučiasi. Jei patiks – palaipsniui pradėk naudoti daugiau. Jei ne – lengvai grįši atgal, nes nesi įsipareigojęs jokiai sudėtingai infrastruktūrai.
Technologijų pasaulis nuolat keičiasi, ir Legend-State yra vienas iš tų įrankių, kuris gali tapti next big thing arba likti niche sprendimu. Bet viena aišku – jis rodo, kad state valdymas React’e gali būti ir paprastas, ir greitas, ir malonus. O tai jau nemažai.
