I have a nested object stored in sessionStorage but returning string values after parsing

Question

I want to return a complete object after parsing my object without repeatedly having to parse each level. Is this possible, have i stored my data incorrectly using redux-persist?

So, I have a login form that sends credentials over to my server to bring data such as accesstoken. This data is sent to sessions automatically via redux persist.

Everytime i want to access this data i need to parse the session storage and then parse again to access the data.

Here's my parsed code:

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

console.log(TOKEN)

result

{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}'}

Each nested object value is returned as a string and not an object. Meaning I'll have to parse the next portion every time I want to go deeper into the object or my objects grow.

Is there a work around, a way to have sessionStorage parsed once and returning a completely parsed nested object or is the error the way the object is initially stored.

Is redux to blame in how the object is initially stored. Here is my redux store file displaying reducers:

import { configureStore, combineReducers } from "@reduxjs/toolkit";
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);

Here's my user reducer:

import { 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

Essentially it's performance optimization done by redux-persist library. For more details please refer to this comment.

If you really need to de-serialize nested object, you could use reviver part of JSON.parse function.

For example if you have only 2 levels this should work:

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