React: Membangun Antarmuka Pengguna · 8/9

Berbagi state: context dan reducer

Kapan prop drilling berhenti memadai, dan cara memindahkan state tanpa library tambahan.

Baca 28 menit

Setelah pelajaran ini kamu bisa

Mengenali kapan prop drilling sudah jadi masalah
Membagikan nilai dengan context, dan mengetahui biayanya
Menulis sebuah reducer, dan menjelaskan kenapa ia mudah diuji
Memilih antara `useState` dan `useReducer`

Prop drilling adalah mengirim sebuah nilai melewati component yang tidak memakainya, hanya untuk mencapai satu yang memakainya. Dua atau tiga tingkat itu wajar dan eksplisit. Enam tingkat melewati component yang mengabaikannya itu tanda masalah.

Context

tsx

import { createContext, useContext, useState } from "react";

interface ThemeValue {
  theme: "light" | "dark";
  setTheme: (t: "light" | "dark") => void;
}

// undefined as the default lets us detect "used outside a provider".
const ThemeContext = createContext<ThemeValue | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  // React 19: the context itself is the provider. No .Provider needed.
  return <ThemeContext value={{ theme, setTheme }}>{children}</ThemeContext>;
}

// A custom hook so consumers never touch the context object directly.
export function useTheme() {
  const value = useContext(ThemeContext);
  if (value === undefined) {
    throw new Error("useTheme must be used inside a ThemeProvider");
  }
  return value;
}

Hook pembungkusnya adalah bagian pentingnya: ia memberi error yang jelas alih-alih undefined misterius saat ada yang lupa provider-nya.

Reducer

Reducer adalah pure function: (stateSaatIni, action) => stateBaru. Semua logika pembaruannya berada di satu tempat, dideskripsikan sebagai data, dan karena ia pure maka sangat mudah diuji — tanpa perlu React.

Coba sendiri

Reducer sungguhan, berjalan sungguhan — ini JavaScript biasa, jadi tidak ada yang disimulasikan di sini.

function bookingReducer(state, action) {
  switch (action.type) {
    case "guest_added":
      if (state.guests.length >= state.maxGuests) return state;   // ignore
      return { ...state, guests: [...state.guests, action.name] };

case "guest_removed":
      return { ...state, guests: state.guests.filter((g) => g !== action.name) };

case "nights_changed": {
      const nights = Math.max(1, Math.min(30, action.nights));    // clamp
      return { ...state, nights: nights };
    }

case "reset":
      return initialState;

default:
      // An unknown action is a programming error, so say so loudly.
      throw new Error("Unknown action: " + action.type);
  }
}

const initialState = { guests: [], nights: 1, maxGuests: 3 };

// Every rule about this feature is visible in one function.
const actions = [
  { type: "guest_added", name: "Ana" },
  { type: "guest_added", name: "Budi" },
  { type: "nights_changed", nights: 5 },
  { type: "guest_added", name: "Citra" },
  { type: "guest_added", name: "Dedi" },      // over the limit: ignored
  { type: "nights_changed", nights: 999 },    // clamped to 30
  { type: "guest_removed", name: "Budi" },
];

let state = initialState;
for (const action of actions) {
  state = bookingReducer(state, action);
  console.log(action.type.padEnd(16) + JSON.stringify({ guests: state.guests, nights: state.nights }));
}

console.log("");
console.log("Testing it needs no React, no DOM, and no mocking:");
console.log("  reducer(initial, guest_added) ->",
  JSON.stringify(bookingReducer(initialState, { type: "guest_added", name: "X" }).guests));
console.log("  original state untouched?    ", JSON.stringify(initialState.guests));

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

tsx

import { useReducer } from "react";

function BookingForm() {
  const [state, dispatch] = useReducer(bookingReducer, initialState);

  return (
    <>
      <p>{state.guests.length} guests, {state.nights} nights</p>
      <button onClick={() => dispatch({ type: "guest_added", name: "Ana" })}>
        Add guest
      </button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </>
  );
}

Component-nya sekarang hanya *mendeskripsikan apa yang terjadi*. Ia tidak memuat aturan soal batas, pembatasan nilai, atau urutan — semuanya ada di reducer, diuji secara terpisah.

Pakai	Saat
`useState`	Satu atau dua nilai independen, pembaruan sederhana
`useReducer`	Beberapa nilai yang berubah bersama, atau ada aturan di antaranya
`useReducer`	State berikutnya bergantung pada yang sekarang dengan cara yang tidak sederhana
`useReducer`	Kamu ingin logika pembaruannya bisa diuji tanpa render

Tugas praktik

Ambil bookingReducer dari runner-nya dan tulis file test untuknya — tanpa React, tanpa rendering, cukup expect(reducer(state, action)). Cakup: menambah saat sudah di batas, membatasi jumlah malam yang sangat besar, menghapus orang yang tidak ada, dan memastikan state input-nya tidak pernah dimutasi. Test terakhir itulah yang akan menangkap bug di masa depan.

Hasil yang diharapkan

Empat test yang lolos tanpa pernah me-render apa pun.