Menguasai Asas Redux: Panduan Lengkap untuk Pengurusan Negeri dalam React

Asas Redux: Penjelasan Terperinci dengan Contoh Kod

Redux ialah perpustakaan pengurusan negeri yang digunakan secara meluas dengan aplikasi JavaScript, terutamanya dengan React. Ia menyediakan kedai berpusat untuk keadaan apl anda, menjadikannya lebih mudah untuk diurus dan nyahpepijat, terutamanya dalam aplikasi yang besar dan kompleks. Redux mengikuti aliran data satu arah dan memastikan perubahan keadaan berlaku dengan cara yang boleh diramal, menjadikannya lebih mudah untuk memahami cara apl anda berfungsi.

Mari kita pecahkan asas Redux langkah demi langkah, menerangkan setiap konsep dengan contoh kod.

---

1. Apakah Redux?

Redux ialah bekas keadaan yang boleh diramal untuk apl JavaScript. Ia membantu anda mengurus keadaan apl anda secara terpusat, menjadikannya lebih mudah untuk nyahpepijat dan skala.

Prinsip Teras Redux:

• Sumber Tunggal Kebenaran: Keseluruhan keadaan aplikasi disimpan dalam satu objek (stor), menjadikannya mudah untuk dikesan dan dimanipulasi.
• Negeri ialah Baca Sahaja: Satu-satunya cara untuk menukar keadaan adalah dengan menghantar tindakan.
• Perubahan Dibuat dengan Fungsi Tulen: Keadaan diubah suai oleh pengurang, iaitu fungsi tulen yang menentukan cara keadaan berubah sebagai tindak balas kepada tindakan.

---

2. Konsep Teras Redux

Redux bergantung pada komponen utama berikut:

1. Tindakan

tindakan ialah objek JavaScript biasa yang menerangkan peristiwa atau tindakan yang telah berlaku dalam aplikasi. Setiap tindakan mesti mempunyai sifat jenis, yang menerangkan tindakan yang dilakukan.

Contoh Tindakan:

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• Di sini, kenaikan dan penurunan ialah pencipta tindakan. Mereka mengembalikan objek tindakan dengan medan jenis. Sifat jenis memberitahu Redux cara mengendalikan tindakan dalam pengurang.

---

2. Pengurang

pengurang ialah fungsi tulen yang mengambil keadaan semasa dan tindakan, kemudian mengembalikan keadaan baharu. Reducer ialah fungsi yang menentukan bagaimana keadaan harus berubah sebagai tindak balas kepada tindakan. Ia sepatutnya menjadi fungsi tulen, bermakna mereka tidak mengubah suai keadaan asal tetapi mengembalikan objek keadaan baharu.

Contoh Peredam:

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• Dalam contoh di atas:
  • keadaan awal ditakrifkan dengan kiraan 0.
  • Pengurangan mendengar tindakan PENINGKATAN dan PENURUNAN dan mengemas kini keadaan kiraan dengan sewajarnya.
  • Barisan kembali { ...state, count: state.count 1 } mencipta objek baharu untuk mengekalkan kebolehubahan dan mengemas kini keadaan.

---

3. Kedai

kedai menyimpan keseluruhan keadaan permohonan anda. Kedai dicipta menggunakan kaedah createStore daripada Redux, dan di situlah tempat tinggal keadaan aplikasi. Kedai ini juga menyediakan kaedah untuk menghantar tindakan dan melanggan perubahan dalam negeri.

Contoh Kedai:

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

• Stor dicipta dengan menghantar counterReducer kepada createStore.
• Kini, keadaan aplikasi diuruskan oleh Redux, dan sebarang perubahan pada keadaan akan melalui pengurang.

---

3. Menyambungkan Redux dengan React

Komponen tindak balas perlu berinteraksi dengan kedai Redux untuk mendapatkan keadaan dan tindakan penghantaran. React-Redux, perpustakaan yang berasingan, digunakan untuk menyambungkan React dengan Redux. Ia menyediakan cangkuk seperti useSelector untuk mengakses keadaan kedai dan menggunakanDispatch untuk menghantar tindakan.

Langkah untuk Menghubungkan Redux dengan React:

1. Balut apl anda dengan komponen Pembekal daripada react-redux untuk menghantar kedai kepada semua komponen anda.
2. Gunakan useSelector untuk mengakses keadaan.
3. Gunakan useDispatch untuk menghantar tindakan yang mengubah suai keadaan.

---

4. Menyediakan Redux dalam Apl React

Mari kita lihat persediaan lengkap untuk menyambungkan Redux dengan apl React yang mudah.

---

Langkah 1: Pasang Redux dan React-Redux

Pertama sekali, anda perlu memasang Redux dan React-Redux:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

---

Langkah 2: Buat Tindakan

Dalam Redux, tindakan ialah objek JavaScript biasa yang menerangkan perubahan yang ingin anda lakukan kepada keadaan.

npm install redux react-redux

• Fungsi kenaikan dan pengurangan ialah pencipta tindakan yang mengembalikan objek tindakan.
• Objek tindakan mempunyai medan jenis yang menerangkan tindakan.

---

Langkah 3: Cipta Pengurangan

Pengurang ialah fungsi yang mengambil keadaan semasa dan tindakan serta mengembalikan keadaan baharu.

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• Pengurangan mendengar tindakan PENINGKATAN dan PENURUNAN dan mengemas kini keadaan sewajarnya.

---

Langkah 4: Cipta Kedai

Kedai adalah tempat tinggal negeri. Ia dicipta menggunakan kaedah createStore daripada Redux.

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

• Kami lulus counterReducer untuk createStore untuk mencipta kedai yang akan menguruskan keadaan untuk apl kami.

---

Langkah 5: Menyambungkan Redux dengan React

Sekarang, mari sambungkan Redux ke apl React kami menggunakan Pembekal, useDispatch dan gunakan cangkuk Pemilih.

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

• Pembekal: Membungkus keseluruhan aplikasi, menyerahkan stor Redux ke semua komponen.
• useSelector: Mendapatkan semula keadaan semasa (kiraan) daripada gedung Redux.
• useDispatch: Membolehkan anda menghantar tindakan (kenaikan dan pengurangan).

---

5. Kit Alat Redux (Pilihan)

Untuk menjadikan Redux lebih mudah digunakan, Redux Toolkit memudahkan persediaan dengan mengurangkan kod boilerplate. Ia menawarkan utiliti seperti createSlice dan configure Store untuk mengendalikan tugas biasa seperti mencipta pengurang dan mengkonfigurasi kedai.

Contoh Menggunakan Redux Toolkit:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

• Fungsi createSlice menjana pencipta tindakan dan pengurang secara automatik untuk anda.
• configureStore memudahkan persediaan kedai.

---

6. Amalan Terbaik untuk Menggunakan Redux

• Keep Redux for Global State: Gunakan Redux untuk mengurus keadaan seluruh aplikasi (cth., pengesahan pengguna, tetapan).
• Gunakan Keadaan Setempat untuk Komponen Ringkas: Untuk keperluan keadaan yang lebih kecil (seperti input borang), gunakan useState React dan bukannya Redux.
• Elakkan Mutasi Langsung: Sentiasa kembalikan objek baharu apabila mengemas kini keadaan untuk memastikan kebolehubahannya.

---

7. Kesimpulan

Redux ialah alat yang berkuasa untuk mengurus keadaan global dalam aplikasi React. Dengan memahami tindakan, pengurangan dan kedai, anda boleh mengurus keadaan kompleks dengan cara yang boleh diramal. Menggunakan Redux Toolkit boleh memudahkan lagi proses ini. Apabila digunakan dengan betul, Redux boleh menjadikan aplikasi besar lebih mudah untuk diurus, nyahpepijat dan skala.

Dengan pengetahuan ini, anda kini bersedia untuk memasukkan Redux ke dalam aplikasi React anda, memastikan pengurusan keadaan yang lebih cekap merentas apl anda.

---

Atas ialah kandungan terperinci Menguasai Asas Redux: Panduan Lengkap untuk Pengurusan Negeri dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!