在路径“register”的操作中检测到​​不可序列化的值。值：[功能寄存器]

Question

我刚刚在我的反应本机应用程序中安装了 redux-persist 。我收到这个错误

" 在操作中检测到​​不可序列化的值，路径为：register。值：[函数寄存器] 看一下调度此操作的逻辑：{"register": [函数寄存器], "reHydra": [函数补水]，“类型”：“坚持/坚持”}“

商店.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);

应用程序.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;

如何解决这个问题？

Answer 1

引用RTK 文档中 Redux Persist 的使用：

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')
)

另外，您不需要带有 devtools 和 thunk 的中间件增强器。这一切都已经由configureStore.