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

Question

[azemlyankin]

Есть проект, некий интернет магазин. С помощью следующего эктива получаю массив в стор:

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)))
  }
}

Как сделать так, чтобы сначала данные с сервера загрузились в стор, только потом рендерились компоненты?

Answer 1

[Валерий]

Предположим, у вас есть корневой компонент, который рендерит все остальные, обычно это <App />.
В таком случае, вы можете вызвать(диспатч) cardsFetchData на этапе маутинга корневого компонента.
В вашем случае у вас должен быть какой-то флаг загрузки данных - типа isLoading. Следовательно, вы можете условно рендерить все ваши дочерние компоненты по условию:

const App = () => {
    // отправка экшена на запрос данных + селектор получения статуса загрузки
    if (isLoading) {
        return null;
    }
    
    return (...) // тут у вас по идее уже данные находятся в сторе и вы можете писать логику отображения
}

Comments

[azemlyankin]

Спасибо