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

Question

我正在尝试将 redux-persist 集成到我的 react-native 项目中。目的是在应用程序重新启动之间保留 redux 商店的数据，这样用户就不需要在每次启动应用程序时都登录。另外，我想将以前查看过的数据存储在本地存储中，以避免每次重新启动应用程序时重新查询所有数据。

我按照以下代码添加了 redux 持久支持：

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,
};

如果我不添加 jsog 并使用 persistConfig 中的 transforms: [JSOGTransform] 行，我会收到此错误：

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

如果我取消注释 persistConfig 中的 'transforms' 行（按照此处的建议：https://github.com/rt2zz/redux-persist/issues/735），则会出现此错误：

Exception in HostObject::set: < unknown >

我只是将 firestore 数据库返回的 "user" 对象保存在我的 redux-store 中。没有 redux-persist，没有问题，但是添加了 persist 我遇到了这个问题。

登录firestore（使用password/email auth.）成功返回的用户对象会存在什么类型的循环问题？

为什么 JSOG 不能像上面 link 中建议的那样工作？我如何解决这个问题的任何替代方案？

P.S。不仅是从 firestore 返回的用户导致了这些错误，而且从 firestore 返回的任何数据似乎都无法持久保存。

感谢您的帮助！干杯...

Answer 1

我想我解决了问题。我没有安装 JSOG，而是安装了 flatted 并用于我的 redux-persist 转换。

工作转换和 persistConfig 如下所示：

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

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

Answer 2

部分开发者遇到此问题是因为Redax中设置了socket，否则也可以使用这种方式

// SetTransform.js

import { createTransform } from 'redux-persist';
 
const SetTransform = createTransform(
  // transform state on its way to being serialized and persisted.
  (inboundState, key) => {
    // convert mySet to an Array.
    return { ...inboundState, mySet: [...inboundState.mySet] };
  },
  // transform state being rehydrated
  (outboundState, key) => {
    // convert mySet back to a Set.
    return { ...outboundState, mySet: new Set(outboundState.mySet) };
  },
  // define which reducers this transform gets called for.
  { whitelist: ['someReducer'] }
);
 
export default SetTransform;

和

// PersistReducers 

import storage from 'redux-persist/lib/storage';
import { SetTransform } from './transforms';

const persistConfig = {
  key: 'root',
  storage: storage,
  transforms: [SetTransform]
};

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

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

react-native

redux

google-cloud-firestore

redux-persist