Очередь исполнения useEffect в компонентах?

Question

Имеется 2 компонента App и Checkout и Redux переменная cart.

При первой загрузке App исполняется useEffect, который выполняет функцию getCart:

const dispatch = useDispatch()

useEffect(() => {
    getCart(dispatch)
}, [])

Функция getCart обращается к API, которое возвращает некие данные, полученные данные помещаются в State Redux-а(обозначенной переменной cart в Redux-е), данные помещаются корректно, все хорошо:

export const getCart = async (dispatch) => {
    const response = await axios.(некий запрос)
    .catch((error) => console.log(`Error: ${error}`))

    await dispatch(setCart(response))
}

В компоненте Checkout, тоже имеется useEffect, который выполняет функцию getCountries(одним из аргументов является данные из Redux State (переменной cart)):

const dispatch = useDispatch()
const cartId = useSelector(({cart}) => cart.id)

useEffect(() => {
    getCountries(dispatch, cartId)
}, [])

Функция getCountries отображает передался ли id:

export const getCountries = async (dispatch, cartId) => {
    console.log(cartId)
}

Так вот, при запуске проекта и последующему переходу к компоненту Checkout, функция getCountries отображает, что id был передан, НО если мы обновим страницу на компоненте Checkout, то getCountries отобразит, что id не был передан(отображает пустоту). Можно прийти к выводу, что сначала исполняется useEffect компонента Checkout, и только потом useEffect компонента App. Как это можно исправить?

БЛОГ НА HUSL

Очередь исполнения useEffect в компонентах?

Ответы (0 шт):