Redux-persist: Object containing arrays not persisting

[bockc]

I have in my reducer an object following this structure :

const object = {
  JID1: [
    { 
      string: "stringifiedDraft",
      data: {
        data1: {}, 
        data2: {},
        data3: {},
      },
      anotherString: "JID",
    },
    {...},
  ],
  JID2: [...],
  JID3: [...],
}

My reducer seems to be correctly updated during runtime without any issue whatsoever.
However, when I restart my app, redux-persist only returns me an empty object for this entry while all the other data is returned correctly.

I tried several things like persisting a dummy object like const object = { test: "test" } and this one persists without any issue. I noticed that as soon as I have something like const object = { thing: [{ test: "test"}] } in my reducer, only an empty object is returned.

I tried to stringify the new state before applying it to the reducer to check if there was an issue when redux-persist stringifies my reducers states but everything went fine and my data is still here perfectly stringified so the problem does not seem to be there.

My reducers tree works this way: rootReducer -> moduleReducer -> problemReducer

Any idea ?

[gejimayu]

Please check in the localStorage (or whatever you use), is the data stored correctly ?

In Chrome, you can open dev tools and go to application tab. On the left sidebar you can see the list of storages and you can find the stored data there

I've tried to save object with array as an attribute value in my environment and it works just fine.

[bockc]

I'm using react-native, I forgot to mention that, so I had to check my local storage a different way.

Anyway, I logged my local storage completely and from what I see, it does not seem to be saved at all. That's strange because if I stringify my data, it is correctly saved in the local storage and everything works fine. That's a workaround at most for now, I'd like to find a real solution.

Maybe has it something to do with the fact that I did a nested persist configuration for this precise reducer ?
The thing is: I want to save my whole reducer except for a specific key which otherwise makes redux-persist crash my app, this specific key is an object containing a reference, thus cannot be stringified and completely corrupts my stored data forcing users to reinstall the application to use it.

This is my config for blacklisting this single key:

import { combineReducers } from 'redux';
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
import { device } from 'utils';
import chatConversationReducer from './chatConversationReducer';
import chatListReducer from './chatListReducer';

const chatModulePersistConfig = {
  version: device.getVersion(),
  key: 'chatModuleReducer',
  storage,
  blacklist: ['chatListReducer', 'chatConversationReducer'],
};

const chatListPersistConfig = {
  version: device.getVersion(),
  key: 'chatListReducer',
  storage,
  blacklist: ['client'],
};

const chatModuleReducer = combineReducers({
  chatConversationReducer,
  chatListReducer: persistReducer(chatListPersistConfig, chatListReducer),
});

export default persistReducer(chatModulePersistConfig, chatModuleReducer);

And here is the config of my redux store:

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import createSagaMiddleware from 'redux-saga';
import { device } from 'utils';
import Reducers from './reducers';
import rootSaga from './sagas/sagas';

const rootPersistConfig = {
  version: device.getVersion(),
  key: 'root',
  storage,
  blacklist: [
    'appInfosReducer',
    'chatModuleReducer',
    'groupsModuleReducer',
    'loggerReducer',
    'mediaManagerReducer',
    'rightsReducer',
    'searchReducer',
    'socialModuleReducer',
    'userAppsReducer',
    'videoPlayerReducer',
    'widgetsReducer',
  ],
};

const persistedReducer = persistReducer(rootPersistConfig, Reducers);
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, thunk];
// eslint-disable-next-line no-underscore-dangle
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(persistedReducer, composeEnhancer(applyMiddleware(...middlewares)));
const persistor = persistStore(store);

sagaMiddleware.run(rootSaga);

export { persistor, store };

Do you see anything fishy that could explain this behavior ?

[GuillaumeMunsch]

I'm working with @bockc. We solved the issue.
No problem with the package, the error was on our side. We kind of forgot that the redux state was immutable 🤷‍♂

We'll mark this as resolved :)