Seni Bina Mikrobahagian Hadapan dengan Module Federation · Pelajaran

Pengurusan Keadaan Dikongsi

Terokai strategi untuk mengurus keadaan dikongsi merentas aplikasi bersekutu, seperti Redux atau Context API.

Pelajaran 2 daripada 411 langkah

Pengurusan Keadaan Dikongsi ialah pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation merangkumi sejumlah 4 pelajaran.

Apakah Keadaan Dikongsi?

Dalam Antara Muka Mikro, keadaan dikongsi merujuk kepada data yang perlu boleh dicapai dan kekal konsisten merentas aplikasi yang dibangunkan serta digunakan secara bebas.

Contohnya termasuk status pengesahan pengguna, tetapan tema global atau kandungan troli beli-belah.
Keadaan ini bukan milik satu antara muka mikro sahaja, tetapi penting untuk pengalaman pengguna yang padu.

Pengurusan keadaan ini dengan berkesan ialah kunci untuk membina aplikasi bersekutu yang kompleks.

Mengapa Keadaan Dikongsi dalam MFE?

Apabila anda mempunyai berbilang bahagian hadapan mikro yang membentuk satu antara muka pengguna, bahagian-bahagian tersebut sering perlu bertindak balas terhadap maklumat global yang sama.

Pengalaman Pengguna: Pengguna log masuk pada satu MFE, dan MFE lain perlu mengetahui bahawa pengguna tersebut telah disahkan.
Kekonsistenan: Menggunakan keutamaan tema global pada semua bahagian aplikasi.
Aliran Data: Menghantar data daripada satu MFE (contohnya, pemilihan produk) kepada MFE yang lain (contohnya, pembayaran).

Tanpa keadaan dikongsi, setiap MFE akan mengurus datanya sendiri secara berasingan, lalu menyebabkan ketidakselarasan dan pengalaman pengguna yang tidak lancar.

Cabaran Keadaan Dikongsi

Walaupun penting, perkongsian keadaan dalam seni bina Bahagian Hadapan Mikro membawa cabaran yang tersendiri:

Pengasingan: MFE direka bentuk untuk berfungsi secara bebas. Memecahkan pengasingan ini memerlukan perancangan yang teliti.
Kebebasan daripada Rangka Kerja: MFE yang berbeza mungkin menggunakan rangka kerja JavaScript yang berbeza (React, Angular, Vue).
Prestasi: Perkongsian yang tidak cekap boleh menyebabkan pengambilan data berulang atau kemas kini yang perlahan.
Kerumitan: Menentukan pemilikan, mekanisme kemas kini dan cara mencegah konflik boleh menjadi rumit.

Kita memerlukan strategi yang mengimbangi kebebasan dengan keperluan untuk berkongsi maklumat.

Keadaan Dikongsi Mudah: Storan Setempat

Untuk keadaan yang sangat asas, tidak sensitif dan berterusan, Storan Setempat pelayar boleh menjadi penyelesaian yang pantas. Setiap MFE boleh membaca dan menulis padanya.

Walau bagaimanapun, ia tidak reaktif, bermakna MFE tidak dikemas kini secara automatik apabila Storan Setempat berubah. Ia juga tidak sesuai untuk keadaan yang kompleks atau masa nyata.

Cuba tetapkan dan dapatkan satu item:

localStorage.setItem('appTheme', 'dark');
console.log('Theme set to dark.');

const currentTheme = localStorage.getItem('appTheme');
console.log('Current theme:', currentTheme);

// To remove:
// localStorage.removeItem('appTheme');
// console.log('Theme removed.');

Gedung Keadaan Berpusat

Untuk keadaan dikongsi yang lebih kompleks dan reaktif, gedung keadaan berpusat ialah corak yang biasa digunakan. Pustaka seperti Redux ialah contoh yang popular.

Satu sumber kebenaran untuk keadaan aplikasi anda.
Perubahan keadaan yang boleh dijangka melalui tindakan dan pengurang.
Penyahpepijatan dan penjejakan pengubahsuaian keadaan yang lebih mudah.

Dalam persediaan bersekutu, hos atau MFE jauh khusus boleh mendedahkan gedung sedemikian untuk digunakan oleh MFE lain.

Membina Gedung Global Mudah

Mari kita cipta gedung global asas yang bebas daripada rangka kerja. Gedung ini akan menyimpan keadaan dikongsi kita dan membolehkan komponen melanggan perubahan. Ini meniru cara gedung Redux berfungsi pada tahap umum.

Jalankan kod ini untuk melihat gedung mudah berfungsi:

let sharedState = { userStatus: 'loggedOut', notifications: [] };
const subscribers = [];

function getSharedState() {
  return sharedState;
}

function dispatchAction(action) {
  switch (action.type) {
    case 'LOGIN':
      sharedState = { ...sharedState, userStatus: 'loggedIn' };
      break;
    case 'ADD_NOTIFICATION':
      sharedState = { ...sharedState, notifications: [...sharedState.notifications, action.payload] };
      break;
    default:
      return;
  }
  subscribers.forEach(cb => cb(sharedState));
}

function subscribe(callback) {
  subscribers.push(callback);
  return () => {
    const index = subscribers.indexOf(callback);
    if (index > -1) subscribers.splice(index, 1);
  };
}

// --- Example Usage ---
console.log('Initial state:', getSharedState());
const unsubscribe = subscribe(newState => {
  console.log('State updated:', newState);
});

dispatchAction({ type: 'LOGIN' });
dispatchAction({ type: 'ADD_NOTIFICATION', payload: 'Welcome!' });

unsubscribe();
console.log('Unsubscribed from updates.');

Menggunakan Gedung Global

Sekarang, bayangkan MFE yang berbeza perlu bertindak balas terhadap perubahan dalam gedung global ini. MFE tersebut akan menggunakan fungsi getSharedState dan subscribe.

Contoh ini menunjukkan cara dua MFE “maya” boleh berinteraksi dengan gedung dikongsi dan bertindak balas terhadap kemas kini.

let sharedState = { userStatus: 'loggedOut', notifications: [] };
const subscribers = [];

function getSharedState() { return sharedState; }
function dispatchAction(action) {
  switch (action.type) {
    case 'LOGIN': sharedState = { ...sharedState, userStatus: 'loggedIn' }; break;
    case 'ADD_NOTIFICATION': sharedState = { ...sharedState, notifications: [...sharedState.notifications, action.payload] }; break;
    case 'LOGOUT': sharedState = { ...sharedState, userStatus: 'loggedOut' }; break;
    default: return;
  }
  subscribers.forEach(cb => cb(sharedState));
}
function subscribe(callback) {
  subscribers.push(callback);
  return () => { const index = subscribers.indexOf(callback); if (index > -1) subscribers.splice(index, 1); };
}

// --- MFE A (e.g., Header Component) ---
function handleUserStatusChange(state) {
  console.log('MFE A: User status is now', state.userStatus);
}
const unsubscribeMFEA = subscribe(handleUserStatusChange);

// --- MFE B (e.g., Notification Bell) ---
function handleNotificationsChange(state) {
  console.log('MFE B: Notifications:', state.notifications.length);
}
const unsubscribeMFEB = subscribe(handleNotificationsChange);

// Simulate actions from other MFEs or host
dispatchAction({ type: 'LOGIN' });
dispatchAction({ type: 'ADD_NOTIFICATION', payload: 'New message!' });
dispatchAction({ type: 'LOGOUT' });

unsubscribeMFEA();
unsubscribeMFEB();

API Context React untuk MFE

Jika semua Bahagian Hadapan Mikro anda dibina dengan React, API Context boleh menjadi cara yang berkesan untuk berkongsi keadaan. Context menyediakan cara untuk menghantar data melalui pepohon komponen tanpa perlu menghantar props secara manual pada setiap aras.

Cipta Context dalam pustaka dikongsi atau MFE hos.
Dedahkan Context ini melalui Module Federation.
MFE jauh kemudiannya boleh menggunakan Context ini secara langsung.

Pendekatan ini berfungsi dengan baik apabila semua aplikasi bersekutu berada dalam ekosistem React yang sama.

Berkongsi Context React (Konsep)

Untuk berkongsi Context React, biasanya anda akan:

Tentukan Context: Cipta MyContext.js dalam MFE utiliti dikongsi.
Dedahkan Context: Gunakan Module Federation untuk mendedahkan MyContext.Provider dan useContext(MyContext).
Sediakan Context: MFE hos (atau MFE induk) membungkus anak-anaknya (termasuk MFE jauh) dengan <MyContext.Provider value={...}>.
Gunakan Context: Mana-mana MFE jauh kemudiannya boleh mengimport dan menggunakan useContext(MyContext) untuk mengakses keadaan dikongsi.

Ini membolehkan komponen yang bersarang jauh dalam MFE jauh mengakses keadaan yang disediakan oleh MFE induk.

Soalan: Manfaat Keadaan Dikongsi

Anda telah mempelajari pelbagai pendekatan untuk mengurus keadaan dikongsi dalam Bahagian Hadapan Mikro.

Antara berikut, yang manakah manfaat utama pelaksanaan pengurusan keadaan dikongsi yang kukuh dalam seni bina Bahagian Hadapan Mikro?

Jawab dalam pelajaran interaktif

Imbas Kembali: Pengurusan Keadaan Dikongsi

Kita telah meneroka strategi utama untuk mengurus keadaan dikongsi dalam Bahagian Hadapan Mikro:

Keperluan: Penting untuk pengalaman pengguna dan aliran data yang konsisten merentas MFE yang bebas.
Cabaran: Mengekalkan pengasingan, keserasian rangka kerja dan mengurus kerumitan.
Kaedah Mudah: Storan Setempat untuk data asas yang tidak reaktif.
Gedung Berpusat: Menggunakan corak seperti Redux untuk mencipta satu sumber kebenaran yang boleh diakses oleh semua MFE.
Context React: Penyelesaian berkesan untuk berkongsi keadaan apabila semua MFE berada dalam ekosistem React.

Pemilihan strategi yang tepat bergantung pada keperluan pasukan anda, pilihan rangka kerja dan kerumitan data yang dikongsi.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengurusan Keadaan Dikongsi” percuma?

Ya — teks penuh “Pengurusan Keadaan Dikongsi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation, tingkat taraf kepada CoddyKit PRO. Kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pengurusan Keadaan Dikongsi”?

Terokai strategi untuk mengurus keadaan dikongsi merentas aplikasi bersekutu, seperti Redux atau Context API. Anda berlatih Seni Bina Mikrobahagian Hadapan dengan Module Federation menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Seni Bina Mikrobahagian Hadapan dengan Module Federation?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Pengurusan Keadaan Dikongsi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation ini?

Ya. Setiap pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Bas Peristiwa untuk Komunikasi Rentas Aplikasi
Pengurusan Keadaan Dikongsi
Penyelesaian Komunikasi Tersuai
Berkomunikasi dengan Acara DOM Tersuai

← Kembali ke Seni Bina Mikrobahagian Hadapan dengan Module Federation