react-native redux-toolkit: 在状态中检测到不可序列化的值，但我的对象是可序列化的

Question

我刚刚将带有 redux 应用程序的旧式 react-native 迁移到现代 redux-toolkit，现在出现此错误：

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.

这很奇怪，因为对象 CurrentUserSessionData 是如此简单：

class CurrentUserSessionData {
    isOnboardingDone: boolean = false;
}

export default CurrentUserSessionData;

我真的认为它是可序列化的！

此外，错误中写道：“Value:comma CurrentUserSessionData”是不是很奇怪？ : 之后的那个逗号看起来很奇怪，我从来没有定义 pending extra reducer.

我以为我在 state 或 store 定义上犯了错误，我看了很多遍文档，但我没有找到问题所在！

切片：

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();
    }
)

数据存储库:

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
    };

};

店铺:

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;

我如何调度:

import {useAppDispatch} from "./appStateStore/appStateStore";
// ...
const dispatch = useAppDispatch();
await dispatch(currentUserSessionDataGetAsync());
// ...

我做错了什么？

Answer 1

是的，问题是它是真实的 class。 Class 实例不是完全可序列化的，在编写 React+Redux 应用程序时，您实际上永远不需要使用实际的 class。只需将其设为普通 JS 对象即可。

换句话说，不是这个：

    initialState: {
        data: new CurrentUserSessionData(),
    },

就这样：

    initialState: {
        data: {isOnboardingDone: false}
    },

此外，作为旁注，您不必自己致电 combineReducers - configureStore 可以为您完成。

react-native redux-toolkit: 在状态中检测到不可序列化的值，但我的对象是可序列化的

react-native redux-toolkit: a non-serializable value was detected in the state, but my object is serializable

typescript

react-native

redux

redux-thunk

redux-toolkit