I recently upgraded my traditional react-native with redux App to the modern redux-toolkit and encountered an error:
A non-serializable value was found in the state, in the path: `currentUserSessionData.data`. Value:, CurrentUserSessionData {
"isOnboardingDone": false,
},
Please review the reducer(s) handling this action type: currentUserSessionDataSlice/get/pending.
This error is puzzling because the CurrentUserSessionData object is quite simple:
class CurrentUserSessionData {
isOnboardingDone: boolean = false;
}
export default CurrentUserSessionData;
I'm convinced that it is serializable!
Also, isn't it odd that the error states: "Value:comma CurrentUserSessionData"? The comma after : seems out of place, and I never defined the pending extra reducer.
I initially suspected an error in the state or store definitions, and though I've extensively studied the documentation, I can't identify the issue!
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 could be the issue here?