I just migrated my old-school react-native with redux App to the modern redux-toolkit and now I have this error:
A non-serializable value was detected in the state, in the path: `currentUserSessionData.data`. Value:, CurrentUserSessionData {"isOnboardingDone": false,}, Take a look at the reducer(s) handling this action type: currentUserSessionDataSlice/get/pending.Which is very strange because the object CurrentUserSessionData is so simple:
class CurrentUserSessionData { isOnboardingDone: boolean = false;}export default CurrentUserSessionData;I really think it is serializable!
Also, isn't it strange that the error writes: "Value:comma CurrentUserSessionData"? That comma after : seems strange, and I never defined the pendingextra reducer.
I thought I made a mistake in the state or store definitions, I read and read the documentation a lot of times but I don't find the problem!
The slice:
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit'import * as CurrentUserSessionDataRepository from '../services/CurrentUserSessionDataRepository';import CurrentUserSessionData from "../models/CurrentUserSessionData";export const currentUserSessionDataSlice = createSlice({ name: 'currentUserSessionDataSlice', initialState: { data: new CurrentUserSessionData(), }, reducers: {}, extraReducers: build => { build.addCase(currentUserSessionDataGetAsync.fulfilled, (state, action) => { state.data = action.payload; }); },});export const currentUserSessionDataGetAsync = createAsyncThunk("currentUserSessionDataSlice/get", async () => { return await CurrentUserSessionDataRepository.getCurrentUserSessionData(); })The data repository:
import AsyncStorage from '@react-native-async-storage/async-storage';import * as Logger from "./Logger";import CurrentUserSessionData from "../models/CurrentUserSessionData";const asyncStorageCurrentUserSessionDataKey: string = "currentUserSessionData";export const getCurrentUserSessionData = async (): Promise<CurrentUserSessionData> =>{ Logger.logDebug('getCurrentUserSessionData'); const sessionDataRaw = await AsyncStorage.getItem(asyncStorageCurrentUserSessionDataKey); if (sessionDataRaw) { return JSON.parse(sessionDataRaw) as CurrentUserSessionData; } return { isOnboardingDone: false };};The store:
import {configureStore} from "@reduxjs/toolkit";import {combineReducers} from "redux";import {currentUserSessionDataSlice} from "./currentUserSessionDataSlice";import {TypedUseSelectorHook, useDispatch, useSelector} from "react-redux";const appStateStore = configureStore({ reducer: combineReducers({ currentUserSessionData: currentUserSessionDataSlice.reducer, // .... })});export default appStateStore;export type IRootState = ReturnType<typeof appStateStore.getState>;export type IAppDispatch = typeof appStateStore.dispatch;export const useAppDispatch = () => useDispatch<IAppDispatch>();export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector;How I dispatch:
import {useAppDispatch} from "./appStateStore/appStateStore";// ...const dispatch = useAppDispatch();await dispatch(currentUserSessionDataGetAsync());// ...What am I doing wrong?