Блог

Я использую easy-peasy (управление состоянием на основе сокращения), и я не знаю, почему я получаю эту ошибку при вызове метода action в useEffect в приведенном ниже коде: Необработанное отклонение (ошибка типа): попытка незаконной операции с отозванным прокси

 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; 

Когда я утешаю элементы, он возвращает мне это:
Прокси { : null , : null }

Вот моя модель сбора определена

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

 

Пожалуйста, кто-нибудь, укажите, что я делаю неправильно.

easy-peasy используется Immer внутри, что позволяет изменять состояние внутри действия:

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

Если вы не хотите записывать свои действия таким образом (путем state изменения), вы можете отказаться от этого подхода. Об этом говорится в документах:

По умолчанию мы используем immer для предоставления API на основе мутаций. Это совершенно необязательно, вместо этого вы можете вернуть новое состояние из своих действий. Если вы предпочитаете этот подход, вы можете явно отключить immer с помощью значения конфигурации disable Immer для createStore.

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