Redux-persist: Should we handle the circular ref error out of the box?

Created on 25 Feb 2018 · 4Comments · Source: rt2zz/redux-persist

I am facing this error when using this library along with React Native.

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at defaultSerialize (createPersistoid.js:110)
    at stagedWrite (createPersistoid.js:61)
    at processNextKey (createPersistoid.js:56)
    at JSTimers.js:282
    at _callTimer (JSTimers.js:148)
    at Object.callTimers (JSTimers.js:405)
    at MessageQueue.__callFunction (MessageQueue.js:306)
    at MessageQueue.js:108
    at MessageQueue.__guard (MessageQueue.js:269)

The function defined in createPersistoid.js is as below.

function defaultSerialize(data) {
  return JSON.stringify(data);
}

Should we add a try-catch and or use the lib like json-stringify-safe to handle the error out of the box ? I am not sure whether this is a good idea or is there anyway we can silent the throwing error but doing warning for any circular object detected?

Source

peteroid

👍13

Most helpful comment

+1 but I'd rather like to see redux-persist use a library like JSOG in order to allow to persist and restore circular objects
It turns out this can be done using a transform:

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 = {
    key: 'myapp',
    storage : storage,
    transforms: [JSOGTransform]
}

digitalillusion on 24 Sep 2018

👍14 ❤2

All 4 comments

Same error ...

offaxis on 26 Mar 2018

+1 Seeing this error as well on web.

jonascript on 13 Apr 2018

+1 but I'd rather like to see redux-persist use a library like JSOG in order to allow to persist and restore circular objects
It turns out this can be done using a transform:

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 = {
    key: 'myapp',
    storage : storage,
    transforms: [JSOGTransform]
}

digitalillusion on 24 Sep 2018

👍14 ❤2

@digitalillusion thanks for that, solved my problem immediately. JSOG seems to have a pretty small weekly download number which is a little bothersome for long term. Apparently flatted can also be used, but when I installed it it created alot of random ios firestore build errors, so went back to JSOG. Post on stack overflow regarding this as well. -> https://stackoverflow.com/questions/57906696/redux-persist-createpersistoid-error-serializing-state-typeerror-converting-ci