React - React redux 不在本地存储中存储全局变量

Question

我是react和redux的初学者，我试图将全局变量存储在本地存储中，这样即使浏览器刷新它也不会消失。

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

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;

// App.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;