Bagaimana untuk Menetapkan Semula Keadaan Kedai Redux dengan Betul Semasa Log Keluar Pengguna?

Menetapkan semula Keadaan Kedai Redux semasa Log Keluar Pengguna

Dalam Redux, kedai mengekalkan keadaan aplikasi. Memastikan kedai ditetapkan semula kepada keadaan asalnya apabila pengguna log keluar adalah penting untuk mengelakkan isu caching dan pencemaran data.

Untuk mencapainya, satu pendekatan melibatkan penciptaan pengurang akar tersuai. Ia akan mewakilkan pengendalian tindakan kepada pengurang yang dihasilkan oleh combineReducers(). Walau bagaimanapun, apabila ia menghadapi tindakan USER_LOGOUT, ia akan mengembalikan keadaan awal.

Dengan mengandaikan anda mempunyai rootReducer yang kelihatan seperti ini:

const rootReducer = combineReducers({
  // Your app's top-level reducers
});

Anda boleh menamakan semula kepada appReducer dan mentakrifkan rootReducer baharu yang mewakilkan kepada appReducer:

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

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

Seterusnya, ajar rootReducer untuk mengembalikan keadaan awal apabila tindakan USER_LOGOUT diterima. Reducer diketahui mengembalikan keadaan awal apabila dipanggil dengan undefined sebagai argumen pertama, tanpa mengira jenis tindakan. Kami boleh memanfaatkan tingkah laku ini:

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

  return appReducer(state, action);
};

Dengan pengubahsuaian ini, semua pengurang akan dimulakan semula apabila USER_LOGOUT, dan mereka boleh mengembalikan keadaan berbeza berdasarkan action.type.

Jika aplikasi anda menggunakan redux-persist, anda mungkin perlu mengosongkan keadaan yang disimpan juga:

const rootReducer = (state, action) => {
  if (action.type === 'SIGNOUT_REQUEST') {
    // Remove the persisted state for all keys defined in your persistConfig(s)
    storage.removeItem('persist:root');
    // storage.removeItem('persist:otherKey');

    return appReducer(undefined, action);
  }

  return appReducer(state, action);
};

Pendekatan ini memastikan kedua-duanya stor Redux dalam memori dan keadaan yang disimpan ditetapkan semula apabila pengguna log keluar, mengekalkan keadaan bersih untuk sesi pengguna berikutnya.

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