一种方法是在您的应用程序中编写一个根减速器。
根减速器通常会将处理操作委托给由combineReducers()
. 但是,每当它接收USER_LOGOUT
到动作时,它都会重新返回初始状态。
例如,如果您的根减速器看起来像这样:
const rootReducer = combineReducers({
/* your app’s top-level reducers */
})
您可以将其重命名为appReducer
并为其编写新的rootReducer
委托:
const appReducer = combineReducers({
/* your app’s top-level reducers */
})
const rootReducer = (state, action) => {
return appReducer(state, action)
}
现在我们只需要教新rootReducer
的返回初始状态以响应USER_LOGOUT
动作。正如我们所知,reducers 应该在undefined
作为第一个参数调用时返回初始状态,无论动作如何。让我们使用这个事实来有条件地剥离state
我们将累积的传递给appReducer
:
const rootReducer = (state, action) => {
if (action.type === 'USER_LOGOUT') {
return appReducer(undefined, action)
}
return appReducer(state, action)
}
现在,每当USER_LOGOUT
发生火灾时,所有减速器都将重新初始化。如果他们愿意,他们也可以返回与最初不同的东西,因为他们也可以检查action.type
。
重申一下,完整的新代码如下所示:
const appReducer = combineReducers({
/* your app’s top-level reducers */
})
const rootReducer = (state, action) => {
if (action.type === 'USER_LOGOUT') {
return appReducer(undefined, action)
}
return appReducer(state, action)
}
如果你使用redux-persist,你可能还需要清理你的存储。Redux-persist 将您的状态副本保存在存储引擎中,并且状态副本将在刷新时从那里加载。
首先,您需要导入适当的存储引擎,然后在设置状态之前解析状态undefined
并清理每个存储状态键。
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')
return appReducer(undefined, action);
}
return appReducer(state, action);
};