Redux-Persist 不在本地存储中存储状态

Question

我正在尝试将特定的reducer状态保存到localStorage，这样即使浏览器刷新它也不会消失。

我已经写了一些代码，但是在存储中我看到的只是这样：

"persist:root", "{"_persist":{\"version\":-1,\"rehydrated\":true}"}"

没有

user

数据。我错过了什么？

仅供参考，我需要将用户数据存储为全局变量的原因是我必须根据这个值重新渲染。问题是，当刷新浏览器时，它会继续导航到登录页面。我检查了 redux dev 工具，用户数据在

Login

组件中设置正确。

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
import { persistStore } from 'redux-persist';

const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['user']
};

let user = createSlice({
  name: 'user',
  initialState: {
    userId: 'anonymous',
    isLoggedIn: false
  },
  reducers: {
    changeUser(state, action) {
      state.userId = action.payload.userId;
      state.isLoggedIn = action.payload.isLoggedIn;
    }
  }
})

const persistedReducer = persistReducer(persistConfig, user.reducer);

export let { changeUser } = user.actions;

let store = configureStore({
  reducer: {
    user: persistedReducer
  }
  // persistedReducer
})

export const persistor = persistStore(store);
export default store;

应用程序.js

function App(){
  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);

  return (
    <BrowserRouter>
      <RedirectToLogin />
      <Center>
        {isLoggedIn && <Sidebar userRole={''} />}
        <Routes>
          <Route path="/loginPage" element={<Login />} />
          {isLoggedIn ? (
            <>
              <Route element={<ProtectedRoute isLoggedIn={isLoggedIn} />} />
              <Route path="/" element={<Editor/>}/>
              <Route path={"/loginPage"} element={<Login/>}/>
              <Route path="*" element={<NotFoundPage/>}/>
            </>
          ) : (
            <>
              <Route path="*" element={<Navigate to="/loginPage" replace />} />
            </>
          )}
        </Routes>
      </Center>
    </BrowserRouter>
  )
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store, {persistor} from "./store";
import {Provider} from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

Answer 1

问题

问题似乎出在持久化配置上，特别是它白名单的内容，以及它持久化的减速器函数：

const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['user']
};

这会保留您所保留的减速器的

user

键，例如

user.reducer

，但是

user

切片的reducer没有任何

user

键可以持久化，只是直接的

user.reducer

功能。

const user = createSlice({
  name: 'user',
  initialState: {
    userId: 'anonymous',
    isLoggedIn: false
  },
  reducers: {
    changeUser(state, action) {
      state.userId = action.payload.userId;
      state.isLoggedIn = action.payload.isLoggedIn;
    }
  }
})

const persistedReducer = persistReducer(persistConfig, user.reducer);

解决方案

要么保留 整个

user.reducer

功能，例如

user.reducer

中没有白名单：

import { configureStore, createSlice } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
import { persistStore } from 'redux-persist';

const user = createSlice({
  name: 'user',
  initialState: {
    userId: 'anonymous',
    isLoggedIn: false
  },
  reducers: {
    changeUser(state, action) {
      state.userId = action.payload.userId;
      state.isLoggedIn = action.payload.isLoggedIn;
    }
  }
});

export const { changeUser } = user.actions;

const persistConfig = {
  key: 'root',
  storage: storage,
};

const persistedUserReducer = persistReducer(persistConfig, user.reducer);

const store = configureStore({
  reducer: {
    user: persistedUserReducer
  }
})

export const persistor = persistStore(store);
export default store;

或者创建一个根减速器函数，例如“combineReducers”，并将

user

状态列入白名单。

import {
  configureStore,
  createSlice,
  combineReducers
} from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
import { persistStore } from 'redux-persist';

const user = createSlice({
  name: 'user',
  initialState: {
    userId: 'anonymous',
    isLoggedIn: false
  },
  reducers: {
    changeUser(state, action) {
      state.userId = action.payload.userId;
      state.isLoggedIn = action.payload.isLoggedIn;
    }
  }
});

const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['user']
};

export const { changeUser } = user.actions;

const rootReducer = combineReducers({
  user: user.reducer,
});

const persistedRootReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedRootReducer,
})

export const persistor = persistStore(store);
export default store;