Wie kann ein Redux-Store-Status beim Abmelden des Benutzers ordnungsgemäß zurückgesetzt werden?

Zurücksetzen des Redux Store-Status beim Abmelden des Benutzers

In Redux behält der Store den Status der Anwendung bei. Um Caching-Probleme und Datenverunreinigungen zu verhindern, muss unbedingt sichergestellt werden, dass der Store auf seinen ursprünglichen Zustand zurückgesetzt wird, wenn sich ein Benutzer abmeldet.

Um dies zu erreichen, besteht ein Ansatz darin, einen benutzerdefinierten Root-Reducer zu erstellen. Die Aktionsverarbeitung wird an von combineReducers() generierte Reduzierer delegiert. Wenn jedoch eine USER_LOGOUT-Aktion auftritt, kehrt es zum Anfangszustand zurück.

Angenommen, Sie haben einen RootReducer, der so aussieht:

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

Sie können ihn in appReducer umbenennen und einen definieren neuer rootReducer, der an appReducer delegiert:

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

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

Als nächstes lehren Sie den rootReducer um den Anfangszustand zurückzugeben, wenn die USER_LOGOUT-Aktion empfangen wird. Es ist bekannt, dass Reduzierer unabhängig vom Aktionstyp den Anfangszustand zurückgeben, wenn sie mit undefiniert als erstem Argument aufgerufen werden. Wir können dieses Verhalten nutzen:

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

  return appReducer(state, action);
};

Mit dieser Änderung werden alle Reduzierer bei USER_LOGOUT neu initialisiert und können optional je nach Aktionstyp unterschiedliche Zustände zurückgeben.

Wenn Da Ihre Anwendung Redux-Persist verwendet, müssen Sie möglicherweise auch den gespeicherten Zustand löschen:

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

Dieser Ansatz stellt sicher, dass beide im Arbeitsspeicher gespeichert sind Der Redux-Speicher und der gespeicherte Zustand werden zurückgesetzt, wenn sich der Benutzer abmeldet, sodass ein sauberer Zustand für nachfolgende Benutzersitzungen erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ein Redux-Store-Status beim Abmelden des Benutzers ordnungsgemäß zurückgesetzt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!