@azemlyankin

Как правильно получать данные с сервера в проект React Redux?

Есть проект, некий интернет магазин. С помощью следующего эктива получаю массив в стор
export function cardsFetchData(url){

return(dispatch) => {
fetch(url)
.then(response => {
if(!response.ok){
throw new Error(response.statusText)
}
return response
})
.then(response => response.json())
.then(cards => dispatch(addState(cards)))
}
}
Подскажите, пожалуйста, как мне сделать так чтобы сначала данные с сервера загрузились в стор, только потом рендерились мои компоненты?
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
vmakhnyuk
@vmakhnyuk
Frontend developer
Предположим, у вас есть корневой компонент, который рендерит все остальные, обычно это <App />.
В таком случае, вы можете вызвать(диспатч) cardsFetchData на этапе маутинга корневого компонента.
В вашем случае у вас должен быть какой-то флаг загрузки данных - типа isLoading. Следовательно, вы можете условно рендерить все ваши дочерние компоненты по условию:
const App = () => {
    // отправка экшена на запрос данных + селектор получения статуса загрузки
    if (isLoading) {
        return null;
    }
    
    return (...) // тут у вас по идее уже данные находятся в сторе и вы можете писать логику отображения
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы