时间戳

首页 > 解决方案 > Redux-persist 不断加载

reactjs - Redux-persist 不断加载

问题描述

动机

我想在页面刷新/重定向时保留用户信息，但我也想在注销操作后清除它。

配置

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/>in的加载信息PersistGate： 

<Provider store={store}>
    <PersistGate loading={<Loader/>} persistor={persistor}>
        ...
    </PersistGate>
</Provider>

可能的原因

现在我想这是因为我通过logoutReducer了它只引用了其他减速器，这就是配置失败的原因。如何保留用户信息并保留注销清除存储技巧？有没有其他解决方案？任何帮助将不胜感激♥

标签： reactjsreduxredux-persist

解决方案

回答

在对这个问题进行研究期间，我发现了这个问题，海报也有类似的问题。解决方案在这篇文章的最后一条评论中，即： 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'
})

推荐阅读