redux-persist/createPersistoid: error serializing state TypeError: Converting circular structure to JSON

Question

I am trying to integrate redux-persist to my react-native project. The aim is to persist the redux store's data between application re-launch so that user does not need to log in each time they launch the app. Also, I want to store the previously viewed data on the local storage to avoid re-querying all the data each time app is re-launched.

I added the redux persist support as per the code below:

import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
//import { createLogger } from 'redux-logger';
import { persistStore, persistReducer } from 'redux-persist';
import rootReducer from '../reducers/index';
import ReduxThunk from 'redux-thunk';
import { createTransform } from 'redux-persist';
import JSOG from 'jsog';

export const JSOGTransform = createTransform(
    (inboundState, key) => JSOG.encode(inboundState),
    (outboundState, key) => JSOG.decode(outboundState),
)

const persistConfig = {
    // Root
    key: 'root',
    // Storage Method (React Native)
    storage: AsyncStorage,
    //transforms: [JSOGTransform]
    // Whitelist (Save Specific Reducers)
    // whitelist: [
    //   'authReducer',
    // ],
    // // Blacklist (Don't Save Specific Reducers)
    // blacklist: [
    //   'counterReducer',
    // ],
};

// Middleware: Redux Persist Persisted Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Redux: Store
const store = createStore(
    persistedReducer,
    applyMiddleware(ReduxThunk),
);

// Middleware: Redux Persist Persister
let persistor = persistStore(store);
// Exports
export {
  store,
  persistor,
};

If I don't add jsog and use the transforms: [JSOGTransform] line in the persistConfig I get this error:

redux-persist/createPersistoid: error serializing state TypeError: Converting circular structure to JSON

If I uncomment the 'transforms' line in the persistConfig (as per the suggestion here: https://github.com/rt2zz/redux-persist/issues/735), then I get this error:

Exception in HostObject::set: < unknown >

I am just persisting the returned "user" object from the firestore database in my redux-store. Without the redux-persist, there has been no problem, but with the persist added I am having this issue.

What type of circular problem would exist in the user object returned after successful login to firestore (using password/email auth.)?

Why would JSOG not work as suggested in the link above? Any alternatives to how I can solve this problem?

P.S. Not only the user returned from firestore is causing these errors, but any data returned from firestore seems to fail to persist.

I appreciate any helps! Cheers...

Answer 1

I think I solved the problem. Instead of JSOG I installed flatted and used in for my redux-persist transform.

Working transform and persistConfig looks like this:

export const transformCircular = createTransform(
    (inboundState, key) => Flatted.stringify(inboundState),
    (outboundState, key) => Flatted.parse(outboundState),
)

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    stateReconciler: autoMergeLevel2,
    transforms: [transformCircular]
};