@Mysianio

Как 'оптимизировать' работу fetch с redux?

Здравствуйте, ситуация такая:
При работе с API (через fetch) закидываю файлы в стэйт редакса
Проблема в том, что когда я пытаюсь прописать через connect какие-то переменные и использовать их в коде, API не успевает загрузиться и получается так, что стэйт в редаксе пустует
Соответственно это вызывает ошибки по типу Cannot read property 'something' of undefined
Есть другие способы работы, кроме как (if props.wrap.something !== undefined)?
Запросу к серверу храню в отдельных экшонах

+ как отследить, прошел ли запрос?
Например:
const [isLoading, setIsLoading] = useState(true);

  useEffect(()=>{
    let lat;
    let long;
    let proxy = 'https://cors-anywhere.herokuapp.com/';
    navigator.geolocation.getCurrentPosition(position =>{
      lat = position.coords.latitude;
      long = position.coords.longitude;
      props.onGetWeather(`${proxy}https://api.darksky.net/forecast/8f2f993672f627f5cc108000ff1f78bd/${lat},${long}`)
      setIsLoading(false);
    });
  }, [])

export default connect(
  state =>({
    weather: state.weather,
  }),
  dispatch =>({
    onGetWeather: (url) =>{
      dispatch(getWeather(url))
    }
  })
)(Weather)

export function getWeatherSuccess(data){
  return{
    type: 'FETCH_WEATHER_DATA',
    data
  }
}

export function getWeather(url){
  return (dispatch)=>{
    fetch(url, {method: 'GET'})
      .then(response =>{
        if(!response.ok){
          console.log('Error');
        }
          return response
      })
      .then(response => response.json())
      .then(data => dispatch(getWeatherSuccess(data)))
  }
}

Как отследить, что props.onGetWeather прошел?
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Добавьте в редьюсер состояние загрузки и ошибки:
initialState = {
  isFetching: false,
  data: null,
  error: null,
};


В компоненте:
const Example = ({ isFetching, error, data }) => {
  if (isFetching) return <Preloader />;
  if (error) return <Error error={error} />;
  if (!data) return null; // или что хотите показывать при отсутствии данных
  
  // далее обращения к ключам data и JSX.
}


Локальное состояние загрузки использовать не надо.
Метод onGetWeather(path) переделайте в getWeather(lat, long)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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