Redux-persist 继续加载
Redux-persist keeps on loading
动机
我想保留页面 refresh/redirect 上的用户信息,但我也想在注销操作后清除它。
配置
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);
问题
一旦我 运行 应用程序,我就会得到来自 PersistGate
中的 <Loader/>
的加载信息:
<Provider store={store}>
<PersistGate loading={<Loader/>} persistor={persistor}>
...
</PersistGate>
</Provider>
可能的原因
现在我猜是因为我传递了 logoutReducer
,它只引用了其他减速器,这就是配置失败的原因。我如何保留用户信息并保持注销清除存储技巧?还有其他解决方案吗?任何帮助将不胜感激♥
回答
在研究这个问题的过程中,我发现了 this 问题,poster 也遇到了类似的问题。解决方法在这个post的最后一条评论里,即:
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'
})
动机
我想保留页面 refresh/redirect 上的用户信息,但我也想在注销操作后清除它。
配置
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);
问题
一旦我 运行 应用程序,我就会得到来自 PersistGate
中的 <Loader/>
的加载信息:
<Provider store={store}>
<PersistGate loading={<Loader/>} persistor={persistor}>
...
</PersistGate>
</Provider>
可能的原因
现在我猜是因为我传递了 logoutReducer
,它只引用了其他减速器,这就是配置失败的原因。我如何保留用户信息并保持注销清除存储技巧?还有其他解决方案吗?任何帮助将不胜感激♥
回答
在研究这个问题的过程中,我发现了 this 问题,poster 也遇到了类似的问题。解决方法在这个post的最后一条评论里,即: 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'
})