Comment réinitialiser correctement l'état d'un magasin Redux lors de la déconnexion de l'utilisateur ?

Réinitialisation de l'état du magasin Redux lors de la déconnexion de l'utilisateur

Dans Redux, le magasin maintient l'état de l'application. S'assurer que le magasin est réinitialisé à son état initial lorsqu'un utilisateur se déconnecte est essentiel pour éviter les problèmes de mise en cache et la contamination des données.

Pour y parvenir, une approche consiste à créer un réducteur de racine personnalisé. Il déléguera la gestion des actions aux réducteurs générés par combineReducers(). Cependant, lorsqu'il rencontre une action USER_LOGOUT, il renvoie l'état initial.

En supposant que vous ayez un rootReducer qui ressemble à ceci :

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

Vous pouvez le renommer en appReducer et définir un nouveau rootReducer qui délègue à appReducer :

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

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

Ensuite, apprenez au rootReducer à renvoie l'état initial lorsque l'action USER_LOGOUT est reçue. Les réducteurs sont connus pour renvoyer l'état initial lorsqu'ils sont appelés avec undefined comme premier argument, quel que soit le type d'action. Nous pouvons exploiter ce comportement :

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

  return appReducer(state, action);
};

Avec cette modification, tous les réducteurs seront réinitialisés lors de USER_LOGOUT, et ils pourront éventuellement renvoyer différents états en fonction de l'action.type.

Si votre application utilise redux-persist, vous devrez peut-être également effacer l'état stocké :

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);
};

Cette approche garantit que les fichiers en mémoire Le magasin Redux et l'état stocké sont réinitialisés lorsque l'utilisateur se déconnecte, conservant ainsi un état propre pour les sessions utilisateur ultérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!