A non-serializable value was detected in an action, in the path: `register`. Value: [Function register]

Issue

I just now installed redux-persist in my react-native app. And I'm getting this error

" A non-serializable value was detected in an action, in the path: register. Value: [Function register] Take a look at the logic that dispatched this action: {"register": [Function register], "rehydrate": [Function rehydrate], "type": "persist/PERSIST"} "

Store.js

import {configureStore} from '@reduxjs/toolkit';
import {combineReducers, applyMiddleware, compose} from 'redux';
import ReduxThunk from 'redux-thunk';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {persistReducer} from 'redux-persist';
import {persistStore} from 'redux-persist';
import CityReducer from './reducers/CityReducer';
import FavouritesReducer from './reducers/FavouritesReducer';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['favouriteData'],
};

const rootReducer = combineReducers({
  cityData: CityReducer,
  favouriteData: FavouritesReducer,
});

let composeEnhancers = compose;

if (__DEV__) {
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const store = configureStore({
  reducer: rootReducer,
  enhancer: composeEnhancers(applyMiddleware(ReduxThunk)),
});

const persistor = persistStore(store);

export {store, persistor};
export default persistReducer(persistConfig, rootReducer);

App.js

import React, {useEffect} from 'react';
import SplashScreen from 'react-native-splash-screen';
import 'react-native-gesture-handler';
import {PersistGate} from 'redux-persist/integration/react';
import {NavigationContainer} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import {StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {store, persistor} from './redux/store';
import DrawerNavigator from './navigation/DrawerNavigator';
Icon.loadFont().then();

const App = () => {
  useEffect(() => {
    const interval = setTimeout(() => {
      SplashScreen.hide();
    }, 2000);

    return () => {
      clearTimeout(interval);
    };
  }, []);
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <NavigationContainer style={style.container}>
          <DrawerNavigator />
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};
const style = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;

How to solve this issue?

Solution

Quoting from use with Redux Persist in the RTK Docs:

import { configureStore } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'

import App from './App'
import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  version: 1,
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

let persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

Also, you don't need that middleware enhancer with the devtools and thunk. All of that is already set up by configureStore.

Answered By - phry