- Katılım
- 4 Şubat 2024
- Mesajlar
- 3.916
- Makaleler
- 7
- Çözümler
- 77
- Beğeniler
- 6.444
Bu gönderi bilgisayar kullanmayı bilen, okuduğunu leb demeden anlayan, React ve JSX bilgisi de olan JavaScript web programcılarına yöneliktir.
Sorunsuz state management için Redux gibi şeyleri hiç kullanmıyorum. Sizi Valtio ile tanıştırmak istiyorum.
NextJS projemde (React de olur) src klasöründe bir state.js dosyası.
Herhangi bir bileşende veya sayfada doğrudan referans:
State elemanlarını herhangi bir yerde herhangi bir şekilde mutate etmek.
Snapshot almak, aka değerleri görüntülemek değişikliklere abone olmak ve anlık state yenilenmesi
Sonra da bu snapshot'a erişim ve abonelik:
Canlı gör:
@brkdnmz sen Zustand kullanıyordun. Bunu da bir incele
valtio
🧙 Valtio makes proxy-state simple for React and Vanilla. Latest version: 2.1.3, last published: 2 months ago. Start using valtio in your project by running `npm i valtio`. There are 381 other projects in the npm registry using valtio.
Sorunsuz state management için Redux gibi şeyleri hiç kullanmıyorum. Sizi Valtio ile tanıştırmak istiyorum.
NextJS projemde (React de olur) src klasöründe bir state.js dosyası.
JavaScript:
import { proxy } from "valtio";
const state = proxy({
application: false,
authenticated: false,
offering: false,
user: {},
});
export { state };Herhangi bir bileşende veya sayfada doğrudan referans:
JavaScript:
import { state } from "@/state";State elemanlarını herhangi bir yerde herhangi bir şekilde mutate etmek.
JavaScript:
state.sidebar = false;
state.user = {
username: "test"
}Snapshot almak, aka değerleri görüntülemek değişikliklere abone olmak ve anlık state yenilenmesi
JavaScript:
import { proxy, useSnapshot } from "valtio";
//Component fonksiyonu içinde yapacaksın bunu:
const snap = useSnapshot(state);Sonra da bu snapshot'a erişim ve abonelik:
JavaScript:
useEffect(() => {
if (snap.user == {}) {
return;
}
console.log("Giriş yapan kullanıcı: ", snap.user.username);
}, [snap.user]);Canlı gör:
@brkdnmz sen Zustand kullanıyordun. Bunu da bir incele
Son düzenleme: