createPersistoid: error serializing state

[rhenmark]

I got this error. I am new in redux-persist.

[jamaljeantobias]

I get this as well

[marionorato77]

I had the same issue because I was saving the response I was getting from a Firestore query into the state. The Firestore query response contains cyclic data (ref parameter) that is not possible to JSON.stringify hence the error from Redux-Persist. In my case I just had to remove the 'ref' parameter containing the cyclic data and the issue got solved.

[MukeshSinghBisht]

I resolved this issue but still i am not sure how that thing is working. Actually I was saving e.target in a redux state and i was getting that error. So i used local state of the component (this.state) and error was resolved. Can anyone explain this behaviour?

[zxl634]

@marionorato77 where exactly did you remove the ref parameter? I have the following action getting some data that I suspect is the cause of the error mentioned above, but not sure where to remove 'ref'.

export const getSomeData = () => {
  return (dispatch) => {
    firebase.database().ref('/data/subdata').on('value', (snapshot) => {
      dispatch({
        type: SOMETYPE,
        payload: snapshot.val(),
      })
    })
  }
}

UPDATE: Found out that that passed a "user" object from a Firebase query that I think had the same problem.

[dameunbite]

same here

App.js

import React, { Component } from 'react'
import Navigation from './App/AppNavigation';
import { Provider } from 'react-redux';
import configureStore from './App/redux/stores/configureStore';
import { PersistGate } from 'redux-persist/integration/react'

const { store, persistor } = configureStore();

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
              <Navigation />
          </PersistGate>
      </Provider>
    );
  }
}

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import app from '../reducers';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';

const persistConfig = {
  key: 'root',
  timeout: 0,
  storage: AsyncStorage
}

const persistedReducer = persistReducer(persistConfig, app);

export default () => {
  let store = createStore(persistedReducer, applyMiddleware(thunk));
  let persistor = persistStore(store);
  return { store, persistor };
};

Error message

console.error: "redux-persist/createPersistoid: error serializing state", {}

console.error
    YellowBox.js:59:8
processNextKey
    createPersistoid.js:79:16
<unknown>
    JSTimers.js:282:17
_callTimer
    JSTimers.js:152:6
Object.callTimers
    JSTimers.js:414:6
MessageQueue.__callFunction
    MessageQueue.js:366:41
<unknown>
    MessageQueue.js:106:11
MessageQueue.__guard
    MessageQueue.js:314:8
MessageQueue.callFunctionReturnFlushedQueue
    MessageQueue.js:105:9

[israromar]

this works using JSOG from

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]
}

[AnshIcode]

use the path of the reference instead of sending the whole reference it will work fine.