redux-persist 不更新状态并持久化答案

【问题标题】：redux-persist not updating the state and persistingredux-persist 不更新状态并持久化
【发布时间】：2022-11-11 15:34:50
【问题描述】：

我正在尝试实现 redux-persist，它在浏览器检查器中显示具有初始值的存储，但这些值永远不会在持久存储中更新

这是浏览器中显示的localStorage，在我调用调度后它永远不会改变

userData
: 
"{\"userDetails\":{\"username\":\"\",\"name\":\"\"},\"status\":\"loggedout\"}"
_persist
: 
"{\"version\":1,\"rehydrated\":true}"

这是我的商店配置 store.ts

import {
  combineReducers,
  configureStore,
  PreloadedState,
} from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import { apiSlice } from './services/apiSlice';
import loginFormReducer from '../components/login/store/loginFormSlice';
import userDataReducer from './slices/userDataSlice';

const persistConfig = {
  key: 'root',
  version: 1,
  storage,
  whitelist: ['userData'],
};

const rootReducer = combineReducers({
  login: loginFormReducer,
  userData: userDataReducer,
  [apiSlice.reducerPath]: apiSlice.reducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

//for testing purpose
export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

export function setupStore(preloadedState?: PreloadedState<RootState>) {
  return configureStore({
    reducer: persistedReducer,
    preloadedState,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }).concat(apiSlice.middleware),
  });
}

export type RootState = ReturnType<typeof store.getState>;
export type AppStore = ReturnType<typeof setupStore>;
export type AppDispatch = typeof store.dispatch;

这是我设置持久门的主要位置主要的.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import { setupStore } from './app/store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import './index.css';
import './mirage-mock-server/server';

let persistor = persistStore(setupStore());
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={setupStore()}>
    <PersistGate
      loading={null}
      persistor={persistor}
    >
      <React.StrictMode>
        <Router>
          <App />
        </Router>
      </React.StrictMode>
    </PersistGate>
  </Provider>
);

我调用初始数据的 Slice 和我更改状态的 reducer 用户数据切片.ts

import { UserData, UserDetails } from '../../types/UserDataType';

const initialState: UserData = {
  userDetails: {
    username: '',
    name: '',
  },
  status: 'loggedout',
};

export const userDataSlice = createSlice({
  name: 'userData',
  initialState,
  reducers: {
    setCredentials: (state, action: PayloadAction<UserDetails>) => {
      state.userDetails = action.payload;
      state.status = 'loggedin';
    },
  },
});

export const { setCredentials } = userDataSlice.actions;

export default userDataSlice.reducer;

【问题讨论】：

标签： reactjs react-redux redux-persist

【解决方案1】：

我在这里遇到了一个非常相似的问题：Having an issue with redux-persist not updating localStorage

我很想知道这种变化是否能解决问题。

    setCredentials: (state, action: PayloadAction<UserDetails>) => {
      state.userDetails.username = action.payload.username;
      state.userDetails.name = action.payload.name;
      state.status = 'loggedin';
    },

【讨论】：