Bagaimanakah Saya Boleh Menetapkan Semula Keadaan Kedai Redux untuk Mengekalkan Integriti Aplikasi Selepas Log Keluar Pengguna?

Menetapkan Semula Keadaan Kedai Redux: Mengekalkan Integriti Aplikasi

Untuk pengurusan keadaan yang mantap dalam Redux, adalah penting untuk menetapkan semula kedai kepada keadaan asalnya dalam senario tertentu. Ini memastikan bahawa aplikasi mencerminkan maklumat yang tepat dan terkini.

Senario Masalah

Pertimbangkan urutan peristiwa berikut:

1. Pengguna A log masuk, membawa kepada penyimpanan data dalam stor.
2. Log Pengguna A keluar.
3. Pengguna B log masuk tanpa memuat semula penyemak imbas.

Dalam situasi ini, data cache kekal dipautkan kepada Pengguna A, yang berpotensi menyebabkan ketidakkonsistenan data. Untuk menangani perkara ini, kita perlu menetapkan semula stor Redux kepada keadaan asalnya apabila pengguna pertama log keluar.

Penyelesaian: Pengubahsuaian Root Reducer

Satu pendekatan berkesan melibatkan pengubahsuaian pengurang akar aplikasi. Pengurang akar bertanggungjawab untuk mengendalikan semua tindakan, jadi kami boleh mengarahkannya untuk mengembalikan keadaan awal apabila menerima tindakan tertentu, seperti tindakan log keluar.

const appReducer = combineReducers({
  /* Your application's top-level reducers */
});

const rootReducer = (state, action) => {
  return appReducer(state, action);
};

Walau bagaimanapun, kami ingin menetapkan semula pengurang akar. hanya apabila tindakan log keluar dicetuskan. Untuk mencapai ini, kita boleh mentakrifkan pernyataan bersyarat dalam rootReducer untuk menyemak tindakan log keluar dan, jika ditemui, kembali tidak ditentukan:

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    return appReducer(undefined, action);
  }

  return appReducer(state, action);
};

Sekarang, apabila tindakan log keluar dihantar, appReducer akan dipanggil dengan undefined sebagai hujah pertamanya, yang akan menyebabkan semua pengurang ditetapkan semula kepada keadaan asalnya.

Pembersihan Storan Redux-Persist

Jika anda menggunakan Redux-Persist, anda juga mungkin perlu membersihkan storannya, kerana ia mengekalkan salinan keadaan anda. Kod di bawah menggambarkan cara untuk mencapai ini:

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    storage.removeItem('persist:root');
    return appReducer(undefined, action);
  }

  return appReducer(state, action);
};

Kod ini akan mengalih keluar keadaan tersimpan daripada enjin storan, memastikan permulaan baharu dibuat apabila pengguna log keluar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Semula Keadaan Kedai Redux untuk Mengekalkan Integriti Aplikasi Selepas Log Keluar Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!