2

我正在使用easy-peasy（基于redux的状态管理），但我不知道为什么在下面的代码中调用useEffect中的操作方法时会出现此错误： 未处理的拒绝（TypeError）：尝试非法操作被撤销的代理

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;

当我在安慰物品时，它会返回给我： Proxy { : 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));
        })
    }
}

请有人指出我做错了什么。

4

1 回答 1

0

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

如果您不想以这种方式编写您的操作（通过 mutating state），您可以选择退出这种方法。这在文档中有所说明：

默认情况下，我们使用 immer 来提供基于突变的 API。这完全是可选的，您可以改为从您的操作中返回新状态。如果您更喜欢这种方法，您可以通过 createStore 的 disable Immer 配置值显式禁用 immer。

const store = createStore(model, {
  disableImmer: true //  set the flag
})
于 2021-02-26T17:38:17.193 回答