我在Redux商店中为用户设置了一个状态,它有一些字段,包括token。如果我的本地存储是新鲜的,我可以登录到我的应用程序,在Redux中更新用户信息,一切都很好。
我们正在使用redux-persist和redux-toolkit,我希望这不是问题所在。我们的状态中有比这个用户多得多的内容,但这是我们需要保持会话到会话的全部内容,所以重写所有内容将是一种耻辱:/
然而,在注销时,当我试图清除用户信息时,我的本地存储没有更新,然后Rehydrate获取我们曾经拥有的用户信息,并将其放回存储中,使调用实际上什么也不做。
store.js
import { combineReducers } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import alertReducer from './alertSlice';
import loaderReducer from './loaderSlice';
import notificationReducer from './notificationSlice';
import userReducer from './userSlice';
import { persistStore, createMigrate, persistReducer } from 'redux-persist';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
const rootReducer = combineReducers({
alert: alertReducer,
loader: loaderReducer,
notification: notificationReducer,
user: userReducer,
});
const migrations = {
0: (state) => {
// initial state, do not change -GL
return {
alert: {
alerts: [],
},
loader: {
loader: {
show: false,
message: '',
},
},
notification: {
notifications: [],
priority: '',
},
user: {
subscription_expired: true,
subscription_expires_date: null,
payment_failed: false,
}
}
},
1: (state) => {
return {
...state,
user: {
...state.user,
token: null,
userInitial: null,
}
}
}
}
const persistConfig = {
key: 'root',
storage,
version: 1,
whitelist: ['user'],
migrate: createMigrate(migrations, { debug: false }),
stateReconciler: autoMergeLevel2
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
export default () => {
const store = configureStore({
reducer: persistedReducer,
});
const persistor = persistStore(store);
return { store, persistor };
};
userSlice.js
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
subscription_expired: true,
subscription_expires_date: null,
payment_failed: false,
token: null,
userInitial: null,
};
const userSlice = createSlice({
name: 'user',
initialState: initialState,
reducers: {
updateUser: (state, action) => {
const { payload } = action;
state.subscription_expired = payload.subscription_expired;
state.subscription_expires_date = payload.subscription_expires_date;
state.payment_failed = payload.payment_failed;
state.token = payload.access_token;
},
clearUser: (state, action) => {
console.log('clearing user');
state = initialState;
},
storeToken: (state, action) => {
state.token = action.payload;
},
clearToken: (state, action) => {
state.token = null;
},
},
});
export const { updateUser, clearUser, storeToken, clearToken } = userSlice.actions;
const { reducer } = userSlice;
export default reducer;
我的功能组件logOut中的Logout函数只是调用我的api的helper
const handleLogout = () => {
logOut()
.then(() => {
dispatch(clearUser());
navigate('/');
});
};
我试过autoLevelMerge 1。我试过写切片来返回新对象,而不是这里看到的immer伪突变。我还没有找到很多关于这两个如何交互的信息,但我找到的例子似乎表明这种设置是正确的。
当我分派clear user时,我希望用户被设置回初始状态,并且我希望localstorage能够反映这一点。
1条答案
按热度按时间zfciruhq1#
由于某种原因更改
至
修复了这个问题。我不明白为什么,因为
不起作用