Durum ve azaltıcılar; Context türlerini belirleme
Bileşen durumunu useState ve useReducer ile yönetin, ardından durumu güvenli bir özel kancayla türü belirlenmiş bir Context'e taşıyın.
Durum ve azaltıcılar; Context türlerini belirleme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.
Giriş
Hedef: Yerel durumla (useState) başlayın, türü belirlenmiş bir azaltıcıya (useReducer) geçin, ardından güvenli bir özel kancayla durumu türü belirlenmiş bir bağlama taşıyın.
- Durumu ve eylemleri açıkça modelleme
- Ayırt edici birleşimleri tercih etme
- Bağlam erişimini koruma
Türü belirlenmiş useState
Duruma somut bir tür ek açıklaması verin (örneğin, number). Hızlı güncellemelerde güncelliğini yitirmiş kapanımlardan kaçınmak için güncelleyici biçimini kullanın.
import React, { useState } from "react"
export default function Counter() {
const [count, setCount] = useState<number>(0)
const inc = () => setCount(c => c + 1)
const dec = () => setCount(c => c - 1)
return (
<div style={{ display: "grid", gap: 8 }}>
<div>Count: {count}</div>
<div style={{ display: "flex", gap: 8 }}>
<button onClick={inc}>+1</button>
<button onClick={dec}>-1</button>
</div>
</div>
)
}Türü belirlenmiş useReducer
Eylem türünü ayırt edici bir birleşim olarak modelleyin. switch tüm durumları kapsar; yükler her dal için tür bakımından belirlenmiştir.
import React, { useReducer } from "react"
type State = { count: number }
type Action =
| { type: "inc" }
| { type: "add"; by: number }
| { type: "reset" }
function reducer(s: State, a: Action): State {
switch (a.type) {
case "inc": return { count: s.count + 1 }
case "add": return { count: s.count + a.by }
case "reset": return { count: 0 }
}
}
export default function App() {
const [state, dispatch] = useReducer(reducer, { count: 0 })
return (
<div style={{ display: "grid", gap: 8 }}>
<div>Count: {state.count}</div>
<button onClick={() => dispatch({ type: "inc" })}>+1</button>
<button onClick={() => dispatch({ type: "add", by: 5 })}>+5</button>
<button onClick={() => dispatch({ type: "reset" })}>Reset</button>
</div>
)
}Bağlam ve kanca
Context<T | null> oluşturun, ardından null olması durumunda hata atan useX kancasını dışa açın. Tüketici kodu basit ve tür bakımından güvenli kalır.
import React, { createContext, useContext, useReducer } from "react"
type State = { count: number }
type Action = { type: "inc" } | { type: "add"; by: number } | { type: "reset" }
function reducer(s: State, a: Action): State {
switch (a.type) {
case "inc": return { count: s.count + 1 }
case "add": return { count: s.count + a.by }
case "reset": return { count: 0 }
}
}
type Ctx = { state: State; dispatch: React.Dispatch<Action> }
const CounterCtx = createContext<Ctx | null>(null)
export function useCounter() {
const ctx = useContext(CounterCtx)
if (!ctx) throw new Error("useCounter must be used within CounterProvider")
return ctx
}
export function CounterProvider({ children }: { children: React.ReactNode }) {
const [state, dispatch] = useReducer(reducer, { count: 0 })
return <CounterCtx.Provider value={{ state, dispatch }}>{children}</CounterCtx.Provider>
}
export default function App() {
return (
<CounterProvider>
<Inner />
</CounterProvider>
)
}
function Inner() {
const { state, dispatch } = useCounter()
return (
<div style={{ display: "grid", gap: 8 }}>
<div>Count: {state.count}</div>
<button onClick={() => dispatch({ type: "inc" })}>+1</button>
</div>
)
}Bağlam ve azaltıcı deseni
Okuma ve gönderme işlemlerini bileşenler arasında ayırın. Sağlayıcı, alt öğeleri sarar ve türleri belirlenmiş durum ile gönderme işlevini sunar.
import React from "react"
import { CounterProvider, useCounter } from "./ctx"
function Controls() {
const { dispatch } = useCounter()
return (
<div style={{ display: "flex", gap: 8 }}>
<button onClick={() => dispatch({ type: "inc" })}>+1</button>
<button onClick={() => dispatch({ type: "add", by: 10 })}>+10</button>
<button onClick={() => dispatch({ type: "reset" })}>Reset</button>
</div>
)
}
function View() {
const { state } = useCounter()
return <div>Count: {state.count}</div>
}
export default function App() {
return (
<CounterProvider>
<div style={{ display: "grid", gap: 8 }}>
<View />
<Controls />
</div>
</CounterProvider>
)
}En iyi uygulamalar
En iyi uygulamalar:
- Durumu en aza indirin ve geri kalanını türetin.
- Eylemler için ayırt edici birleşimleri tercih edin.
- Bağlam erişimini özel bir kancayla koruyun.
Bağlam türleri kontrolü
Hızlı kontrol: Bir React bağlamının türünü belirlemenin güvenli bir yolu nedir?
Özet
Özet: useState ile başlayın, geçişleri useReducer ile modelleyin ve paylaşılan durumu özel bir kancayla korunan türleri belirlenmiş bir bağlama taşıyın.
Sıkça Sorulan Sorular
“Durum ve azaltıcılar; Context türlerini belirleme” dersi ücretsiz mi?
Evet — “Durum ve azaltıcılar; Context türlerini belirleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.
“Durum ve azaltıcılar; Context türlerini belirleme” dersinde ne öğreneceğim?
Bileşen durumunu useState ve useReducer ile yönetin, ardından durumu güvenli bir özel kancayla türü belirlenmiş bir Context'e taşıyın. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“Durum ve azaltıcılar; Context türlerini belirleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Özellikler ve alt öğeler; olay işleyicileri; ref'ler
- Durum ve azaltıcılar; Context türlerini belirleme
- Bileşen genelleri — giriş