Un modo per farlo sarebbe quello di scrivere un riduttore di radice nella tua applicazione.
Il riduttore di radice delegherebbe normalmente la gestione dell'azione al riduttore generato da combineReducers()
. Tuttavia, ogni volta che riceve USER_LOGOUT
un'azione, restituisce di nuovo lo stato iniziale.
Ad esempio, se il tuo riduttore di radice appariva così:
const rootReducer = combineReducers({
/* your app’s top-level reducers */
})
È possibile rinominarlo appReducer
e scrivere un nuovo rootReducer
delegato ad esso:
const appReducer = combineReducers({
/* your app’s top-level reducers */
})
const rootReducer = (state, action) => {
return appReducer(state, action)
}
Ora dobbiamo solo insegnare al nuovo rootReducer
a restituire lo stato iniziale dopo l' USER_LOGOUT
azione. Come sappiamo, i riduttori dovrebbero restituire lo stato iniziale quando vengono chiamati undefined
come primo argomento, indipendentemente dall'azione. Usiamo questo fatto per eliminare condizionalmente l'accumulato state
mentre lo passiamo a appReducer
:
const rootReducer = (state, action) => {
if (action.type === 'USER_LOGOUT') {
state = undefined
}
return appReducer(state, action)
}
Ora, ogni volta che si USER_LOGOUT
spara, tutti i riduttori verranno inizializzati di nuovo. Possono anche restituire qualcosa di diverso rispetto a prima se lo desiderano, perché possono anche controllare action.type
.
Per ribadire, il nuovo codice completo è simile al seguente:
const appReducer = combineReducers({
/* your app’s top-level reducers */
})
const rootReducer = (state, action) => {
if (action.type === 'USER_LOGOUT') {
state = undefined
}
return appReducer(state, action)
}
Nota che non sto mutando lo stato qui, sto semplicemente riassegnando il riferimento di una variabile locale chiamata state
prima di passarlo a un'altra funzione. La mutazione di un oggetto statale sarebbe una violazione dei principi di Redux.
Nel caso in cui si utilizzi redux-persist , potrebbe essere necessario pulire anche la memoria. Redux-persist mantiene una copia del tuo stato in un motore di archiviazione e la copia dello stato verrà caricata da lì al momento dell'aggiornamento.
Innanzitutto, è necessario importare il motore di archiviazione appropriato , quindi analizzare lo stato prima di impostarlo su undefined
e pulire ogni chiave dello stato di archiviazione.
const rootReducer = (state, action) => {
if (action.type === SIGNOUT_REQUEST) {
// for all keys defined in your persistConfig(s)
storage.removeItem('persist:root')
// storage.removeItem('persist:otherKey')
state = undefined;
}
return appReducer(state, action);
};