[英]Redux-persist keeps on loading
I'd like to keep user information on page refresh/redirect, but also I want to clear it after logout action.我想在页面刷新/重定向时保留用户信息,但我也想在注销操作后清除它。
const rootReducer = combineReducers({productsReducer, auth: accessReducer, usersReducer});
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth']
};
I want to persist data only in accessReducer
that's why it's whitelisted.我只想在
accessReducer
中保留数据,这就是它被列入白名单的原因。 Now I want to handle logout in such way that all data in reset.现在我想以重置所有数据的方式处理注销。 To do so I've created logoutReducer:
为此,我创建了 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);
Once I run the application, I get loading information which comes from a <Loader/>
in PersistGate
:运行应用程序后,我会从
PersistGate
的<Loader/>
获取加载信息:
<Provider store={store}>
<PersistGate loading={<Loader/>} persistor={persistor}>
...
</PersistGate>
</Provider>
Now I guess it's because I pass logoutReducer
which has only reference to other reducers and that's why configuration fails.现在我想这是因为我传递了
logoutReducer
,它只引用了其他减速器,这就是配置失败的原因。 How do I persist user information and keep that logout-clear-store trick?如何保留用户信息并保留注销清除存储技巧? Is there any other solution for this?
有没有其他解决方案? Any help would be appreciated ♥
任何帮助将不胜感激♥
During doing research about this problem I've found this issue, where poster had similar problem.在研究这个问题的过程中,我发现了这个问题,海报也有类似的问题。 Solution is in the last comment in this post, that is: react-reset .
解决方案在这篇文章的最后一条评论中,即: react-reset 。 Here is my application of this package to mentioned above problem:
这是我对上述问题的应用程序:
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);
Then you just simply on logout dispatch action given from redux-reset
:然后你只需简单地从
redux-reset
给出注销调度操作:
store.dispatch({
type: 'RESET'
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.