Как остановить бесконечные циклы?

Question

это мой компонент:

const Inscriptions = () => {

    // get state
    const { inscriptions, loading } = useSelector( state => state.user );

    // flag
    const instances = Object.keys(inscriptions).length;
    
    // dispatch
    const dispatch = useDispatch();

    const getInscriptions = useCallback(
        () => dispatch( getInscriptionsAction() ),
        [ dispatch ]
    );
    const cancel = id => dispatch( cancelInscriptionAction(id) );
    const cancelAll = () => dispatch( cancelAllInscriptionAction() );

    useEffect( () => {
            const queryToApi = () => {
                getInscriptions();  
            };
    
            queryToApi();
    }, [ getInscriptions ]);

    if(loading) return null;
    
    // delete item
    const handleClickCancel = id => {...};

    const handleClickCancelAll = () => {...};

    return ( ... );
}
 
export default Inscriptions;

А вот и редуктор:

case GET_USER_INSCRIPTIONS:
            return {
                ...state,
                error: false,
                loading: true
            };

        case GET_USER_INSCRIPTIONS_SUCCESS:
            return {
                ...state,
                error: false,
                loading: false,
                inscriptions: action.payload
            };                                  

        case GET_USER_INSCRIPTIONS_FAIL:
            return {
                ...state,
                error: true,
                loading: false, 
                inscriptions: []
            };

Моя проблема в том, что у меня есть другой компонент с идентичным c logi, но этот компонент идет в бесконечный цикл. Просматривая мои инструменты разработчика Redux, я вижу, что он постоянно вызывает действие "GET_USER_INSCRIPTIONS", я не знаю, почему он не вызывает его один раз, например, я упускаю что-то, что происходит в фоновом режиме, но с другим компонентом, который не не происходит, он загружается, и как только загрузка ложна (когда действие SUCCESS завершено), он загружается.

Я пробовал решение, добавляя флаг bool в редуктор, например:

case GET_USER_INSCRIPTIONS:
            return {
                ...state,
                error: false,
                loading: true,
                flag: false
            };

        case GET_USER_INSCRIPTIONS_SUCCESS:
            return {
                ...state,
                error: false,
                loading: false,
                flag: true,
                inscriptions: action.payload
            };                                  

        case GET_USER_INSCRIPTIONS_FAIL:
            return {
                ...state,
                error: true,
                loading: false, 
                flag: true,
                inscriptions: []
            };

А затем измените мой useEffect на это:

useEffect( () => {
        if(!loading && !flag) {
            const queryToApi = () => {
                getInscriptions();  
            };
    
            queryToApi();
        }
        
    }, [ getInscriptions, loading, flag ]);

    if(loading) return null;

И работает отлично, но я все еще не понимаю, почему я должен делать это в этом компоненте, в то время как другой хорошо работает без этого. Если кто-то может взглянуть и просветить меня, пожалуйста, я буду очень признателен за это спасибо.

Answer 1

Хорошо, я решил это, дело в том, что у меня были другие действия, не относящиеся к материалам Inscriptions, использующие тот же редуктор, так что это было помехой. Я создал эксклюзивный редуктор для управления моим компонентом надписей. Похоже, что это способ redux, говорящий вам о модулях ваших вещей.

Answer 2

Каждый раз, когда вы вызываете действие GET_USER_INSCRIPTIONS_SUCCESS, вы меняете состояние, которое связано с вашим компонентом, и снова вызываете useEffect, потому что зависимости изменились

для исправления

useEffect( () => {
    if(!loading && !flag) {
        const queryToApi = () => {
            getInscriptions();  
        };

        queryToApi();
    }
}, [ getInscriptions ]);