Unhandled Rejection (TypeError): illegal operation attempted on a revoked proxy

Question

I'm using easy-peasy (redux based state management) and I don't know why I'm getting this error when I'm calling action method in useEffect in the below code: Unhandled Rejection (TypeError): illegal operation attempted on a revoked proxy

import React, { useEffect } from 'react';
import { useStoreActions, useStoreState } from '../model/hooks';
import Crousels from './Crousels/Crousels';
import Footer from './Footer/Footer_';
import Collections from '../containers/Collections/Collections';

const Home = () => {
    
    const items = useStoreState(state => state.Collections.collections);
    const action = useStoreActions(actions => actions.Collections.fetchCollections);

    useEffect(() => {
        action();
    },[action]);

    return (
        <div>
            <Crousels />
            <Footer/>
        </div>
    )
}

export default Home;

When I'm consoling items, it returns me this: Proxy { : null , : null }

Here is my collection model is defined

import axios from 'axios';
import { Action, action, thunk, Thunk } from 'easy-peasy';

interface Response {
    name : string;
    description : string;
}

interface Collections {
    isLoading : boolean;
    collections : Response[];
    error : string;
    fetchCollectionsRequest: Action<Collections>;
    fetchCollectionsSuccess: Action<Collections,Response[]>;
    fetchCollectionsFailure: Action<Collections,string>;
    fetchCollections : Thunk<Collections>;
    fetchCollectionList : Thunk<Collections,string>;
}

export interface StoreModel {
    Collections : Collections;
}

export const model : StoreModel= {
    Collections : {
        isLoading : false,
        collections : [],
        error : '',
        fetchCollectionsRequest : action( state => {
            return {
                ...state,
                isLoading : true
            }
        }),
        fetchCollectionsSuccess : action( ( state, payload ) => {
            return {
                ...state,
                collections : payload,
                isLoading : false
            }
        }),
        fetchCollectionsFailure : action( ( state, payload ) => {
            return {
                ...state,
                isLoading : false,
                error : payload
            }
        }),
        fetchCollections : thunk( actions => {
            actions.fetchCollectionsRequest();
            axios.get('/categories?filter={"where":{"isHidden":false}}')
                .then( res => {
                    const response = res.data.map( (d:any) => {
                        return {
                            name : d.name,
                            description : d.description
                        }
                    })
                    actions.fetchCollectionsSuccess(response)
                })
                .catch( err => actions.fetchCollectionsFailure(err.message));
        })
    }
}

Please someone point out what I'm doing wrong.

Answer 1

easy-peasy uses Immer internally, which allows you to mutate the state inside of an action:

        fetchCollectionsRequest : action( state => {
            state.isLoading = true;
        }),
        fetchCollectionsSuccess : action( ( state, payload ) => {
            state.isLoading = false;
            state.collections = payload;
        }),
        fetchCollectionsFailure : action( ( state, payload ) => {
            state.isLoading = false;
            state.error = payload;
        }),

If you don't want to write your actions this way (by mutating state), you can opt out of this approach. This is stated in the docs:

By default we use immer to provide a mutation based API. This is completely optional, you can instead return new state from your actions. Should you prefer this approach you can explicitly disable immer via the disable Immer configuration value of createStore.

const store = createStore(model, {
  disableImmer: true //  set the flag
})