代码之家 › 专栏 › 技术社区 › J.Kennsy

Redux persist继续加载

redux-persist redux reactjs

2

J.Kennsy · 技术社区 · 7 年前

配置

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 它只参考了其他减速器,这就是配置失败的原因。如何持久保存用户信息并保持注销清除存储技巧?有没有别的解决办法?任何帮助都将不胜感激

1 回复 | 直到 7 年前

1

J.Kennsy 7 年前

回答

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