redux 在路径中的操作中检测到不可序列化的值:`register`,值:[函数寄存器]

7vux5j2d  于 2023-08-05  发布在  其他
关注(0)|答案(1)|浏览(98)

我刚刚在我的react-native应用程序中安装了redux-persistent。我收到这个错误
“在操作中检测到不可序列化的值,路径为:register。数值:[函数寄存器]看一下调度此操作的逻辑:{“寄存器”:[功能寄存器],“再水化”:[功能再水化],“类型”:“持续/持续”}“
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;


该如何解决这个问题?

p3rjfoxz

p3rjfoxz1#

引用自RTK文档中Redux Persists的使用:

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设置好了。

相关问题