Latihan 1: State Management Patterns — React

Latihan 1 dari materi State Management Patterns di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Buat state global sederhana dengan useReducer dan Context, lalu tampilkan temanya.

Di bawah komentar pertama, buat wadah context: const ThemeContext = createContext().
Di App, kelola state { theme: "dark" } dengan useReducer(themeReducer, { theme: "dark" }). themeReducer sudah ada di kode awal, biarkan begitu.
App mengembalikan <ThemeContext.Provider value={{ state, dispatch }}> yang membungkus <ThemeDisplay />.
Di ThemeDisplay, baca const { state } = useContext(ThemeContext) dan tampilkan state.theme di dalam <p id="theme">.

createContext, useReducer dan useContext sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.

Yang dicek:

#theme berisi persis dark.
Kodemu memanggil useReducer dan createContext, bukan cuma menyebutnya di komentar.
ThemeDisplay membaca useContext(ThemeContext), dan isi <p id="theme"> adalah {state.theme}.

Hint

State global butuh dua bagian: tempat menyimpannya (useReducer di App) dan jalur membagikannya ke bawah tanpa props (Context).
Buat ThemeContext dengan createContext(), simpan [state, dispatch] dari useReducer di App, lalu bungkus ThemeDisplay dengan ThemeContext.Provider yang value-nya { state, dispatch }.
const [state, dispatch] = useReducer(themeReducer, { theme: "dark" }); return <ThemeContext.Provider value={{ state, dispatch }}><ThemeDisplay /></ThemeContext.Provider>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: State Management Patterns — React

Hint

Memperbarui Aplikasi