Network request error creates non-serializable action

Network request error creates non-serializable action

[iamandrewluca]

Actually it will throw this warning in more cases for all this errors InvalidRSAA, RequestError, InternalError.

I think that this errors can be replaced with some raw objects. But this will imply a breaking change, because this errors a part of public API

https://github.com/agraboso/redux-api-middleware/blob/master/src/errors.js

[Goszu]

I am using redux toolkit with react native and custom fetch implementation and I've noticed something similar. It fails intermittently with the non-serializable error complaining about the provided fetch property. It is really hard to debug cause It happens like 2% of the times.

[iamandrewluca]

A solution would be to implement toJSON for each non-serializable. But then we should also take care for reviving that non-serializable?!

[alolis]

Same setup here although react-native is not the cause of the problem but the redux-toolkit serializability middleware which is enabled by default.

I am experiencing the same issue but with ApiError which is provided by redux-api-middleware and occurs on request failure type (401 HTTP status in my case).

@ghost, I know that this is bad and I prefer not to do it either, but you can disable the serialization check with the following:

import {apiMiddleware} from 'redux-api-middleware';
import {configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer,
  middleware: [
    apiMiddleware,
    ...getDefaultMiddleware({
        serializableCheck: false
    }),
  ]
});

A better solution is probably to handle the failure type and return a plain object if you want to keep the serializable checker on:
https://www.npmjs.com/package/redux-api-middleware#failure-type-descriptors

It would be nice if by default the raw objects where returned from the errors or all of them to have a toJSON() implemented and by default to call that or via flag.

[Goszu]

I actually solved the problem. In my case it was my token refresh functionality and custom fetch attached to every action. After receiving 401 (expired token) I was getting new token and retrying all queued requests. All re-tries were getting non-serializable action warning. I simply passed my custom fetch implementation to createMiddleware() instead of passing to each action as a prop.