Ошибка с Redux-Persist

Question

Ошибка с Redux-Persist

Союз Здравых Сил Профи (517), на голосовании 4 месяца назад

Вся работа происходит в 2х файлах - configureStore.jsx(где инициализируем persist, настраиваем и экспортируем) и App.jsx, где оборачиваем приложение в PersistGate , чтобы оно имело доступ к новому store. Вроде сделал всё по интсрукции - но всё равно вылетает куча ошибок, при чём разных:

 // configureStore.jsx 
 
import { persistStore, persistReducer } from 'redux-persist' 
import storage from "redux-persist/lib/storage"; // наше хранилище(как localStorage) 
 
 
const persistConfig = {  // делаем persist-config 
    key: 'root', 
    storage, 
} 
const persistorReducer = persistReducer(persistConfig, reducer) 
 
 
export const store = configureStore({ 
    reducer: { 
        persistorReducer, 
        [api.reducerPath]: api.reducer, 
    }, 
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware) 
}) 
export const persistor = persistStore(store)

  Api.jsx 
 
// Redux-dependencies 
import { Provider } from 'react-redux'; 
import { store } from './store/configureStore'; 
 
// Redux-Persist 
import { PersistGate } from 'redux-persist/integration/react'; 
import { persistor } from './store/configureStore'; 
 
const App = () => { 
 
    return ( 
         
             
                     
                         
                     
             
         
    ) 
} 
 
export default App;

Ошибок, как видно, много и они разные - в чём же проблема?

*Примеры ошибок:
1) bundle.js:79382 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
_pStore.dispatch({
type: _constants__WEBPACK_IMPORTED_MODULE_0__.REGISTER,
key: key
});
}
Take a look at the logic that dispatched this action:
{type: 'persist/PERSIST', register: ƒ, rehydrate: ƒ}
2) Uncaught TypeError: Cannot destructure property 'cartObject' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(...)' as it is undefined.
3) Error handled by React Router default ErrorBoundary: Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator.

ну и тд

Answer 1

Ошибки Redux-Persist в вашем коде
1. Несериализуемое значение в действии:
• Ошибка указывает, что в вашем приложении есть действие, которое содержит несериализуемое значение. Redux-Persist не может сохранить несериализуемые значения в хранилище, что приводит к сбою.
• В предоставленном вами коде пример ошибки относится к действию register.
• Вам нужно будет найти это действие и изменить его так, чтобы оно не содержало несериализуемых значений.
• Один из способов сделать это - преобразовать несериализуемые значения в сериализуемые, например, JSON.
2. Неопределенное свойство cartObject:
• Эта ошибка указывает на то, что компонент пытается получить доступ к свойству cartObject из состояния Redux, но оно не определено.
• Это может быть вызвано тем, что редуктор, управляющий cartObject, не обновляется должным образом.
• Вам нужно будет проверить свой редуктор и убедиться, что он правильно обновляет cartObject.
3. Ошибка React Router:
• Эта ошибка указывает на то, что в вашем приложении есть компонент, который приостанавливается во время ответа на синхронный ввод.
• Это может привести к проблемам с отрисовкой и другим ошибкам.
• Вам нужно будет найти компонент, который вызывает эту ошибку, и изменить его так, чтобы он не приостанавливался во время ответа на синхронный ввод.
Дополнительные советы:
• Убедитесь, что вы используете последнюю версию Redux-Persist.
• Проверьте документацию Redux-Persist на наличие дополнительных сведений об устранении неполадок: https://blog.logrocket.com/persist-state-redux-persist-redux-toolkit-react/
• Используйте инструменты разработчика браузера для отладки ошибок Redux.
Решение:
• Несериализуемое значение в действии:
o Найдите действие register и измените его так, чтобы оно не содержало несериализуемых значений.
o Преобразуйте несериализуемые значения в сериализуемые, например, JSON.
• Неопределенное свойство cartObject:
o Проверьте свой редуктор, управляющий cartObject, и убедитесь, что он правильно обновляет cartObject.
• Ошибка React Router:
o Найдите компонент, который вызывает эту ошибку, и измените его так, чтобы он не приостанавливался во время ответа на синхронный ввод.
Рекомендации:
• Используйте более дескриптивные имена ключей и значений в persistConfig.
• Добавьте обработку ошибок в свой код, чтобы вы могли лучше понять, что происходит, когда возникают ошибки.
• Используйте инструменты тестирования, чтобы убедиться, что ваш код работает правильно.