I have the following custom hook:
export const useCurrentUser = () => {
const dispatch = useDispatch();
const user = useSelector(currentUserSelector);
const preferredLanguage = useMemo(() => getUserAttribute(user, "preferred_language") || "en",
[currentUser]
);
useEffect(() => {
dispatch(loadAttributes(preferredLanguage));
}, [preferredLanguage, dispatch]);
return { preferredLanguage };
};
And this redux action:
const _getDefaultAttributes = async dispatch => {
try {
const res = await axios.get("www.api.com/attr.json");
// receive omitted...
} catch (err) {
dispatch(failureAttributes(err));
}
};
export const loadAttributes = (lang = null) => async dispatch => {
if (!lang) {
dispatch(_getDefaultAttributes());
return;
}
try {
const res = await axios.get(`www.api.com/attr-${lang}.json`);
// receive omitted...
} catch {
_getDefaultAttributes(dispatch);
}
};
The problem I have is that it makes about 40 requests. First loadAttributes() is called with en for lang, the api returns an error, since it does not have attributes for en, then it defaults to loading the default attributes. Here is a screenshot of the Network tab:
Any idea what is causing this?
