Panduan Tutorial untuk &#useContext&# dan &#useReducer&# in React: Mengurus Keadaan Global dengan Cekap

Panduan Komprehensif untuk menggunakanKonteks dan penggunaanReducer dalam React: Mengurus Keadaan Global dengan Cekap

pengenalan

Dalam React, keadaan pengurusan adalah penting untuk membina aplikasi dinamik dan interaktif. Walaupun useState dan useReducer bagus untuk mengendalikan keadaan komponen tempatan, apakah yang berlaku apabila anda perlu mengurus keadaan global merentas berbilang komponen? Masukkan useContext dan useReducer—dua cangkuk yang boleh digunakan bersama untuk mengendalikan pengurusan negeri dengan cekap di peringkat global.

Dalam artikel ini, kami akan meneroka cara menggabungkan useContext dan useReducer untuk mencipta sistem pengurusan keadaan yang teguh untuk apl React anda. Kami akan merangkumi asas kedua-dua cangkuk, dan kemudian membimbing anda membina aplikasi mudah untuk menunjukkan cara ia boleh digunakan bersama untuk mengurus keadaan global.

Menjelang akhir panduan ini, anda akan mempunyai pemahaman yang kukuh tentang:

1. useContext: Cangkuk untuk berkongsi keadaan merentas komponen anda.
2. useReducer: Cangkuk untuk menguruskan logik keadaan kompleks.
3. Menggabungkan useContext dan useReducer: Cara menggunakan kedua-dua cangkuk bersama untuk penyelesaian keadaan global berskala.

Jom mulakan!

---

Memahami penggunaanKonteks

Apakah useContext?

useContext ialah cangkuk React yang membolehkan anda berkongsi keadaan (atau sebarang nilai lain) merentasi pepohon komponen anda tanpa perlu menghantar prop secara manual pada setiap peringkat. Ia berguna apabila anda perlu menyediakan data global kepada banyak komponen sekaligus.

Sintaks untuk useContext ialah:

const value = useContext(MyContext);

Di mana MyContext ialah objek konteks yang dicipta oleh React.createContext().

Bila hendak menggunakan useContext?

• Untuk berkongsi keadaan global atau tetapan konfigurasi (cth., tema, pengesahan).
• Apabila melepasi prop melalui banyak peringkat komponen bersarang menjadi menyusahkan.

---

Memahami useReducer

Apakah useReducer?

useReducer ialah cangkuk React yang digunakan untuk mengurus keadaan yang melibatkan logik kompleks atau apabila keadaan bergantung pada keadaan sebelumnya. Ia sering digunakan sebagai alternatif untuk menggunakanState apabila kemas kini keadaan anda perlu berdasarkan tindakan dan terdapat pelbagai jenis perubahan keadaan.

Sintaks untuk useReducer ialah:

const value = useContext(MyContext);

• pengurang: Fungsi yang mengembalikan keadaan baharu berdasarkan keadaan dan tindakan semasa.
• Keadaan permulaan: Keadaan awal pengurang anda.
• penghantaran: Fungsi yang digunakan untuk menghantar tindakan kepada pengurang untuk mengemas kini keadaan.

---

Menggabungkan useContext dan useReducer

Apabila anda menggabungkan useContext dan useReducer, anda boleh berkongsi keadaan kompleks merentas aplikasi anda sambil memusatkan logik untuk peralihan keadaan. Ini amat membantu apabila mengurus keadaan global yang perlu boleh diakses daripada mana-mana komponen dalam apl anda.

Mengapa Gabungkan Mereka?

• Negeri Berpusat: useContext menyediakan skop global untuk keadaan, dan useReducer menawarkan cara berstruktur untuk mengurus perubahan keadaan yang kompleks.
• Kemas Kini Boleh Diramalkan: useReducer membenarkan anda mengurus peralihan keadaan secara boleh diramal dengan tindakan dan pengurang, manakala useContext memastikan keadaan anda tersedia untuk semua komponen.
• Skalabiliti: Gabungan ini memudahkan untuk menskalakan aplikasi yang perlu mengurus keadaan merentas banyak komponen.

---

Contoh Projek: Senarai Tugasan Global

Mari kita buat aplikasi senarai tugasan yang mudah di mana kita menguruskan keadaan global menggunakan useContext dan useReducer. Apl akan menyokong menambah, menogol dan mengalih keluar tugasan.

Langkah 1: Cipta Konteks dan Pengurang

Kita akan mulakan dengan mencipta konteks untuk mengekalkan keadaan global kita dan pengurangan untuk mengurus tindakan.

const [state, dispatch] = useReducer(reducer, initialState);

Penjelasan

• todoReducer: Mengurus keadaan senarai tugasan, termasuk menambah, menogol dan mengalih keluar tugas.
• TodoContext: Menyediakan konteks global untuk keadaan senarai tugasan.
• TodoProvider: Ini ialah komponen pembalut yang menyediakan konteks dan cangkuk useReducer kepada semua anak-anaknya.

---

Langkah 2: Buat Komponen Senarai Tugasan

Sekarang, kami akan mencipta komponen yang memaparkan senarai tugasan dan menyediakan kefungsian untuk menambah, mengalih keluar dan menogol tugas.

import React, { createContext, useContext, useReducer } from 'react';

// Initial State
const initialState = [];

// Reducer Function
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'REMOVE':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

// Create Context
const TodoContext = createContext();

// Provide Context to App
export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

---

Rekap dan Kesimpulan

Dalam artikel ini, kami menggabungkan useContext dan useReducer untuk mengurus keadaan global dalam aplikasi React. Kami berjalan melalui:

1. useContext: Cangkuk untuk menyediakan dan menggunakan konteks dalam pokok komponen.
2. useReducer: Cangkuk untuk mengurus logik keadaan kompleks dengan cara yang boleh diramal dan terpusat.
3. Menggabungkan kedua-duanya: Kami menggunakan kedua-dua cangkuk bersama untuk mengurus senarai tugasan dengan tindakan untuk menambah, menogol dan mengalih keluar tugasan.

Corak ini sangat berskala dan apabila apl anda berkembang dalam kerumitan, useContext dan useReducer boleh membantu anda mengekalkan penyelesaian pengurusan keadaan yang bersih, boleh diramal dan cekap. Eksperimen dengan konsep ini dan gunakannya pada projek anda untuk pengendalian keadaan yang lebih baik!

Selamat pengekodan! ?

Atas ialah kandungan terperinci Panduan Tutorial untuk &#useContext&# dan &#useReducer&# in React: Mengurus Keadaan Global dengan Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!