动机
我想在页面刷新/重定向时保留用户信息,但我也想在注销操作后清除它。
<小时/>配置
const rootReducer = combineReducers({productsReducer, auth: accessReducer, usersReducer});
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth']
};
我只想将数据保留在 accessReducer
中这就是它被列入白名单的原因。现在我想以重置所有数据的方式处理注销。为此,我创建了 logoutReducer:
注销缩减程序
export const logout = () => ({
type: 'USER_LOGOUT'
});
const logoutReducer = (state, action) => {
if(action.type = 'USER_LOGOUT'){
state = undefined;
}
return rootReducer(state, action);
};
存储和持久化
const persistedReducer = persistReducer(persistConfig, logoutReducer);
export const store = createStore(persistedReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);
<小时/>
问题
运行应用程序后,我会获取来自 <Loader/>
的加载信息。在PersistGate
:
<Provider store={store}>
<PersistGate loading={<Loader/>} persistor={persistor}>
...
</PersistGate>
</Provider>
可能的原因
现在我猜是因为我通过了 logoutReducer
它只引用其他 reducer ,这就是配置失败的原因。如何保留用户信息并保留注销清除存储技巧?对此还有其他解决方案吗?任何帮助将不胜感激♥
最佳答案
答案
在研究这个问题时,我发现this问题,海报有类似的问题。解决方案在这篇文章的最后评论中,即: <强> react-reset 。 这是我对该包的应用来解决上述问题:
const appReducer = combineReducers({productsReducer, auth: accessReducer, usersReducer});
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth']
};
const enHanceCreateStore = compose(
applyMiddleware(thunk),
reduxReset()
)(createStore);
const persistedReducer = persistReducer(persistConfig, appReducer);
export const store = enHanceCreateStore(persistedReducer);
export const persistor = persistStore(store);
然后您只需执行 redux-reset
给出的注销调度操作即可:
store.dispatch({
type: 'RESET'
})
关于reactjs - Redux-persist 继续加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52132994/