State & reducer; pengetikan Context
Kelola state komponen dengan useState dan useReducer, lalu angkat state ke Context bertipe dengan hook khusus yang aman.
State & reducer; pengetikan Context adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.
Pendahuluan
Tujuan: Mulai dengan status lokal (useState), beralih ke reducer bertipe (useReducer), lalu angkat status ke Context bertipe dengan hook khusus yang aman.
- Modelkan status dan tindakan secara eksplisit
- Utamakan union terdiskriminasi
- Lindungi akses Context
useState bertipe
Beri anotasi pada status dengan tipe konkret (misalnya, number). Gunakan bentuk pembaru untuk menghindari penutupan yang sudah usang saat melakukan pembaruan cepat.
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>
)
}useReducer bertipe
Modelkan tindakan sebagai union terdiskriminasi. switch tetap mencakup semua kemungkinan; muatan diberi tipe sesuai cabangnya.
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>
)
}Context dan hook
Buat Context<T | null>, lalu sediakan useX yang melempar kesalahan jika nilainya null. Kode pemanggil tetap sederhana dan bertipe baik.
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>
)
}Pola Context dan reducer
Pisahkan pembacaan dan pengiriman tindakan di antara komponen. Penyedia membungkus elemen anak dan menyediakan status serta pengiriman bertipe.
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>
)
}Praktik terbaik
Praktik terbaik:
- Jaga status tetap minimal dan turunkan nilai lainnya.
- Utamakan union terdiskriminasi untuk tindakan.
- Lindungi akses Context dengan hook khusus.
Pemeriksaan pengetikan Context
Pemeriksaan cepat: Apa cara yang aman untuk memberi tipe pada React Context?
Ringkasan
Ringkasan: Mulai dengan useState, modelkan transisi dengan useReducer, dan angkat status bersama ke dalam Context bertipe yang dilindungi hook khusus.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “State & reducer; pengetikan Context” gratis?
Ya — teks lengkap “State & reducer; pengetikan Context” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “State & reducer; pengetikan Context”?
Kelola state komponen dengan useState dan useReducer, lalu angkat state ke Context bertipe dengan hook khusus yang aman. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “State & reducer; pengetikan Context” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Props & children; penangan peristiwa; refs
- State & reducer; pengetikan Context
- Generik komponen — pengantar