我有一个嵌套对象存储在sessionStorage中，但解析后返回字符串值

Question

我想在解析我的对象后返回一个完整的对象，而不必重复解析每个级别。这可能吗，我是否使用 redux-persist 错误地存储了数据？

因此，我有一个登录表单，它将凭据发送到我的服务器以带来诸如 accesstoken 之类的数据。该数据通过 redux persist 自动发送到会话。

每次我想访问这些数据时，我都需要解析会话存储，然后再次解析以访问数据。

这是我解析的代码：

const TOKEN = JSON.parse(sessionStorage.getItem('persist:root'))

console.log(TOKEN)

结果

{user: '{"currentUser":null,"isFetching":false,"error":false,"message":null}', users: '{"users":[],"isFetching":false,"error":false,"message":null}', selectUser: '{"selectUser":[],"isFetching":false,"error":false,"message":null}', product: '{"products":[],"isFetching":false,"error":false}', _persist: '{"version":1,"rehydrated":true}'}

每个嵌套对象值都作为字符串而不是对象返回。这意味着每次我想深入研究对象或者我的对象成长时，我都必须解析下一部分。

是否有解决方法，一种让 sessionStorage 解析一次并返回完全解析的嵌套对象的方法，或者对象最初存储的方式是否存在错误。

redux 是对象最初存储方式的罪魁祸首。这是我的 redux 存储文件，显示了减速器：

import userReducer from "./userRedux";
import productReducer from "./productRedux";
import usersReducer from "./usersRedux";
import selectUserReducer from "./selectUserRedux";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import storageSession from "reduxjs-toolkit-persist/lib/storage/session"
//import storageSession from "redux-persist/lib/storage/session";

const persistConfig = {
  key: "root",
  version: 1,
  storage: storageSession,
};

const rootReducer = combineReducers({
  user: userReducer,
  users: usersReducer,
  selectUser: selectUserReducer,
  product: productReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export let persistor = persistStore(store);

这是我的用户缩减器：

mport { createSlice } from '@reduxjs/toolkit';

const initialState = {
        currentUser: null,
        isFetching: false,
        error: false,
        message: null,
    }

const userSlice = createSlice({
    name:"loggedUser",
    initialState,
    reducers: {
        loginStart: (state) =>{
            state.isFetching= true
        },
        loginSuccess: (state, action) =>{
            state.isFetching= false;
            state.currentUser= action.payload;

        },
        loginFailure: (state, action) => {
            state.isFetching= false;
            state.error= true; 
            state.message= action.payload;
        },
    },
});

export const { loginStart, loginSuccess, loginFailure  } = userSlice.actions;
export default userSlice.reducer;

Answer 1

本质上是由

redux-persist

库完成的性能优化。欲了解更多详情，请参阅此评论。

如果您确实需要反序列化嵌套对象，您可以使用 JSON.parse 函数的

reviver

部分。

例如，如果您只有 2 个级别，这应该可行：

const parsedData = JSON.parse(data, (key, value) => {
  try {
    return JSON.parse(value)
  } catch (error) {
    return value
  }
})