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

Redux persist继续加载

  •  2
  • J.Kennsy  · 技术社区  · 6 年前


    配置

    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 回复  |  直到 6 年前
        1
  •  1
  •   J.Kennsy    6 年前

    回答

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