это мой компонент:
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;
И работает отлично, но я все еще не понимаю, почему я должен делать это в этом компоненте, в то время как другой хорошо работает без этого. Если кто-то может взглянуть и просветить меня, пожалуйста, я буду очень признателен за это спасибо.