A non-serializable value was detected in the state when initial zegoCloud data

Question

This is my code from Home.js. Basically I want in the first time login to homepage will dispatch(setZego(zp)) value.

useEffect(() => {
        if (currentUser) {
            init();
        }
    }, []);

    async function init() {
        const userID = currentUser?.Username;
        const userName = 'userName' + userID;
        const { token } = await generateToken('https://node-express-vercel-master-one.vercel.app', userID);
        const KitToken = ZegoUIKitPrebuilt.generateKitTokenForProduction(1980920521, token, null, userID, userName);
        zp = ZegoUIKitPrebuilt.create(KitToken);
        zp.addPlugins({ ZIM });
        dispatch(setZego(zp));
    }
    async function generateToken(tokenServerUrl, userID) {
        return fetch(`${tokenServerUrl}/api/userID/${userID}`, {
            method: 'GET',
        }).then((res) => res.json());
    }

This is my chatSlide

const chatSlice = createSlice({
    name: 'chat',
    initialState: {
        zego: null,
    },
    reducers: {
        setZego: (state, action) => {
            state.zego = action.payload;
        },
    },
});

export const { setZego } = chatSlice.actions;

But when I login to homepage. The error occurs like this.

Is there anyway thi fix this? I'm been stuck with this 2 days but no answer. Thanks you all and hope you have great day.

And also when I console.log(zp) it like this

This is where I call the zp.sendCallInvitation

  const zp = useSelector((state) => state.chat.zego);
    const { coachId } = useParams();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const chatId = useSelector((state) => state.chat.chatId);

    function handleSend(callType) {
        const targetUser = {
            userID: user?.username,
            userName: user?.username,
        };
            zp.sendCallInvitation({
                callees: [targetUser],
                callType: callType,
                timeout: 60,
            }),
        
            .then((res) => {
                console.warn(res);
            })
            .catch((err) => {
                console.warn(err);
            });
    }

the object also has functions that need to be invoked later, so the ideal way is to establish middleware in your redux, but don't worry the simplest way I can suggest is to use Global State Manager of reactn library, this supports this type of state storage — Abhijeet Abnave, Mar 27 '23 at 19:18

score 0 · Answer 1 · answered Mar 27 '23 at 19:22

In my chatSlide.js I try to do this

setGlobal({
    chat: {
        zego: {},
    },
});
const chatSlice = createSlice({
    name: 'chat',
    initialState: {
        chatId: '',
        user: {},
        zego: {},
    },
    reducers: {
        changeUser: (state, action) => {
            const { currentUser, payload } = action.payload;
            if (payload.uid) {
                state.user = payload;
                state.chatId =
                    currentUser?.Id > payload.uid ? currentUser?.Id + payload.uid : payload.uid + currentUser?.Id;
            } else if (payload) {
                state.user = payload;
                state.chatId = currentUser?.Id > payload ? currentUser?.Id + payload : payload + currentUser?.Id;
            } else if (currentUser === '' && payload === '') {
                state.user = '';
                state.chatId = '';
            }
        },
        setZego: (state, action) => {
            state.zego = action.payload;
        },
    },
});

export const { changeUser, setZego } = chatSlice.actions;

In my home.jsx

useEffect(() => {
        if (currentUser) {
            init();
        }
    }, []);

    async function init() {
        const userID = currentUser?.Username;
        const userName = 'userName' + userID;
        const { token } = await generateToken('https://node-express-vercel-master-one.vercel.app', userID);
        const KitToken = ZegoUIKitPrebuilt.generateKitTokenForProduction(1980920521, token, null, userID, userName);
        zp = ZegoUIKitPrebuilt.create(KitToken);
        zp.addPlugins({ ZIM });
        dispatch(setZego(JSON.parse(CircularJSON.stringify(zp))));
    }
    function generateToken(tokenServerUrl, userID) {
        return fetch(`${tokenServerUrl}/api/userID/${userID}`, {
            method: 'GET',
        }).then((res) => res.json());
        // return fetch(`${tokenServerUrl}/api/get_access_token?userID=${userID}&expired_ts=7200`, {
        //     method: 'GET',
        // }).then((res) => res.json());
    }

In my chat.jsx where I call the button to videocall

 const [{ zego }] = useGlobal('chat');
    const { coachId } = useParams();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const chatId = useSelector((state) => state.chat.chatId);

    function handleSend(callType) {
        const targetUser = {
            userID: user?.username,
            userName: user?.username,
        };

        zego.sendCallInvitation({
            callees: [targetUser],
            callType: callType,
            timeout: 60,
        })
            .then((res) => {
                console.warn(res);
            })
            .catch((err) => {
                console.warn(err);
            });
    }

But the error occurs

A non-serializable value was detected in the state when initial zegoCloud data

1 Answers1