Bagaimana untuk Menetapkan Semula Redux Store dengan Berkesan semasa Log Keluar Pengguna?

Mengendalikan Tetapan Semula Keadaan dalam stor Redux

Redux menyediakan penyelesaian pengurusan keadaan yang berkuasa, membolehkan aplikasi mengurus data kompleks dengan cekap. Walau bagaimanapun, menetapkan semula stor Redux kepada keadaan asalnya mungkin diperlukan untuk senario tertentu, seperti log keluar pengguna atau permulaan aplikasi.

Pertimbangkan senario di mana berbilang pengguna berkongsi aplikasi yang sama dan setiap pengguna mempunyai data cache mereka sendiri dalam kedai itu. Selepas pengguna 1 log keluar, pengguna 2 log masuk tanpa memuat semula penyemak imbas. Ini meninggalkan pengguna 2 dengan data cache yang dikaitkan dengan pengguna 1.

Pengurang Akar Tersuai:

Untuk menangani isu ini, satu pendekatan ialah mencipta pengurang akar tersuai. Pengurangan akar mewakilkan tindakan kepada pengurang individu tetapi memintas tindakan USER_LOGOUT. Apabila USER_LOGOUT berlaku, pengurang akar mengembalikan keadaan asal, dengan berkesan mengosongkan keseluruhan stor.

Sebagai contoh, pengurang akar yang menggabungkan logik ini akan kelihatan seperti ini:

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

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

  return appReducer(state, action);
};

Dengan pengurang akar tersuai ini, panggilan USER_LOGOUT dimulakan setiap pengurang dengan keadaan awalnya, membolehkan pengguna 2 bermula dengan senarai yang bersih.

Redux Persist Reset:

Jika anda menggunakan redux-persist , anda juga mungkin perlu mengendalikan pembersihan keadaan dalam storan, kerana redux-persist lazimnya mengekalkan salinan keadaan dalam enjin storan. Untuk menetapkan semula keadaan storan, anda boleh mengimport enjin storan yang sesuai dan membersihkan setiap kunci keadaan storan semasa log keluar:

const rootReducer = (state, action) => {
  if (action.type === 'SIGNOUT_REQUEST') {
    storage.removeItem('persist:root');
    // Remove other keys as needed

    return appReducer(undefined, action);  // Reset store to initial state
  }

  return appReducer(state, action);
};

Pendekatan ini memastikan bahawa stor dan data storan yang berkaitan ditetapkan semula kepada keadaan asalnya apabila perlu, membenarkan pengguna log masuk ke aplikasi dan mengekalkan data bebas mereka sendiri.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Semula Redux Store dengan Berkesan semasa Log Keluar Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!