redux-persist出现问题,无法更新本地存储

jljoyd4f  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(328)

我在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能够反映这一点。

zfciruhq

zfciruhq1#

由于某种原因更改

clearUser: (state, action) => {
      console.log('clearing user');
      state = initialState;
    },

clearUser: (state, action) => {
      state.subscription_expired = true;
      state.subscription_expires_date = null;
      state.payment_failed = false;
      state.token = null;
      state.userInitial = null;
    },

修复了这个问题。我不明白为什么,因为

state = {...initialState}

不起作用

相关问题