title: A non-serializable value was detected in an action, in the path: `register`. Value: [Function register]
body: <p>I just now installed redux-persist in my react-native app. And I'm getting this error</p>
  <p>&quot; A non-serializable value was detected in an action, in the path: <code>register</code>. Value: [Function register]
  Take a look at the logic that dispatched this action:  {&quot;register&quot;: [Function register], &quot;rehydrate&quot;: [Function rehydrate], &quot;type&quot;: &quot;persist/PERSIST&quot;} &quot;</p>
  <p>Store.js</p>
  <pre><code>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);
  
  </code></pre>
  <p>App.js</p>
  <pre><code>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 = () =&gt; {
    useEffect(() =&gt; {
      const interval = setTimeout(() =&gt; {
        SplashScreen.hide();
      }, 2000);
  
      return () =&gt; {
        clearTimeout(interval);
      };
    }, []);
    return (
      &lt;Provider store={store}&gt;
        &lt;PersistGate persistor={persistor}&gt;
          &lt;NavigationContainer style={style.container}&gt;
            &lt;DrawerNavigator /&gt;
          &lt;/NavigationContainer&gt;
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  const style = StyleSheet.create({
    container: {
      flex: 1,
    },
  });
  export default App;
  </code></pre>
  <p>How to solve this issue?</p>