В чем ошибка redux-persist?

Question

// main.tsx 
import ReactDOM from 'react-dom/client'; 
import App from './App.tsx'; 
import './index.css'; 
import { Provider } from 'react-redux'; 
import store, { persistor } from './store/store.ts'; 
import { PersistGate } from 'redux-persist/integration/react'; 
 
ReactDOM.createRoot(document.getElementById('root')!).render( 
	 
		Loading..} persistor={persistor}>

);

// store.ts 
import { combineReducers, configureStore } from '@reduxjs/toolkit'; 
import { useDispatch } from 'react-redux'; 
import todos from './slices/todoReducer'; 
import storage from 'redux-persist/lib/storage'; 
import persistReducer from 'redux-persist/es/persistReducer'; 
import persistStore from 'redux-persist/es/persistStore'; 
 
const rootReducer = combineReducers({ 
  todos, 
}); 
 
const persistConfig = { 
  key: 'root', 
  storage, 
}; 
 
const persistedReducer = persistReducer(persistConfig, rootReducer); 
 
const store = configureStore({ 
  reducer: persistedReducer, 
}); 
 
export const persistor = persistStore(store); 
export default store; 
 
export type RootState = ReturnType; 
type AppDispatch = typeof store.dispatch; 
export const useAppDispatch = () => useDispatch(); 
Ошибка -

VM7903:6 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register2(key) { 
    _pStore.dispatch({ 
      type: REGISTER, 
      key 
    }); 
  }  
Take a look at the logic that dispatched this action:   
{type: 'persist/PERSIST', register: ƒ, rehydrate: ƒ} 
  
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)  
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data) 
dispatch	@	VM7903:6 
(anonymous)	@	store.ts:23 
Show 8 more frames

HAKER HAKER · Answer

Ошибка A non-serializable value was detected in an action возникает из-за того, что Redux Persist пытается сериализовать состояние Redux, которое содержит функции (register и rehydrate) - а они не могут быть сериализованы. 
 
Проблема: 
 
Redux Persist использует localStorage или другой механизм хранения данных для сохранения состояния приложения. Однако localStorage может хранить только строковые значения. Поэтому Redux Persist должен сериализовать объекты и функции в строку перед сохранением в хранилище. 
 
Решение: 
 
Не сериализуйте функции: Функции register и rehydrate в вашем коде, вероятно, не должны быть частью состояния, которое вы сохраняете. 
 
Используйте redux-persist-transform-filter: Если вам действительно нужно сохранить функции, используйте пакет redux-persist-transform-filter для исключения функций из процесса сериализации: 
 
import { persistReducer, persistStore } from 'redux-persist'; 
import storage from 'redux-persist/lib/storage'; 
import { persistTransform } from 'redux-persist-transform-filter'; 
 
// ... ваш код 
 
const persistConfig = { 
  key: 'root', 
  storage, 
  transforms: [ 
    persistTransform( 
      // Фильтр для исключения функций 
      (state) => { 
        const filteredState = { ...state }; 
        delete filteredState.register; 
        delete filteredState.rehydrate; 
        return filteredState; 
      }, 
      // Фильтр для восстановления функций 
      (state) => { 
        // Восстановление функций здесь 
        return state; 
      } 
    ) 
  ], 
}; 
 
const persistedReducer = persistReducer(persistConfig, rootReducer); 
 
// ... ваш код 
Дополнительные советы: 
 
Просмотрите store.ts: Проверьте, как функции register и rehydrate используются в вашем коде. Возможно, их можно заменить методами, не требующими сериализации. 
Используйте console.log: Чтобы проверить, какие именно объекты и функции не сериализуются, добавьте console.log(state) в persistTransform и посмотрите, что выводится в консоли. 
Документация redux-persist: Ознакомьтесь с документацией redux-persist для получения более подробной информации о сериализации и использовании redux-persist-transform-filter:  https://github.com/rt2zz/redux-persist  
Надеюсь, это поможет вам разобраться с ошибкой и найти решение.