首页 文章

Redux-persist继续加载

提问于
浏览 次
2

动机

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

配置

const rootReducer = combineReducers({productsReducer, auth: accessReducer, usersReducer});

const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['auth']
};

我想仅在 accessReducer 中保留数据，'s why it'已列入白名单 . 现在我希望以重置所有数据的方式处理注销 . 为此，我创建了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，这就是配置失败的原因 . 如何保留用户信息并保持注销清除存储技巧？还有其他解决方案吗？任何帮助将不胜感激♥

reactjs redux redux-persist

1 回答

  • 0

    答案

    在研究这个问题的过程中我发现了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'
})
    回复于

相关问题