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

Question

[Hlib]

Здравствуйте, ситуация такая:
При работе с 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 прошел?

Answer 1

[Антон Спирин]

Добавьте в редьюсер состояние загрузки и ошибки:

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)

Comments

[Hlib]

const initialState = {
  isFetching: true,
  data: null
};

export default function weather(state = initialState, action){
  switch (action.type) {
    case "FETCH_WEATHER_DATA":
      state.data = action.data
      state.isFetching = action.isFetching
      return state;
      break;
    default:
      return state;
  }
}

Сделал так в редьюсере
Во первых ошибка с Redux не пропала, но я смирился и стал прописывать без доп ключей: 'weather: state.weather'
А во вторых, что более обидно, почему-то все еще имеется проблема с данными

В данном случае компонент просто не обновляется, и else не срабатывает:

const Weather = (props) =>{

  const [isFetching, setFetching] = useState(true);

  useEffect(()=>{
    let lat;
    let long;
    navigator.geolocation.getCurrentPosition(position =>{
      lat = position.coords.latitude+17;
      long = position.coords.longitude;
      props.onGetWeather(lat,long)
    });
    setFetching(props.weather.isFetching)
  },[])

  if(isFetching){
    return(
      <div id='loading'>
        <h1>Loading... {props.weather.error}</h1>
      </div>
    )
  }else{
      return(
        <React.Fragment>
            <React.Fragment>
              <h1>{props.weather.data.timezone}</h1>
              <div className='weatherWrap'>
              <h3>{props.weather.data.currently.temperature}</h3>
              <h5>{props.weather.data.currently.summary}</h5>
              </div>
            </React.Fragment>
        </React.Fragment>
      )
  }
}

А если сделать так, то почему-то isFetching получит свое false и пойдёт рендерить компонент, но потом props.weather.data все еще будет равняться null, как так происходит?

const Weather = (props) =>{

  useEffect(()=>{
    let lat;
    let long;
    navigator.geolocation.getCurrentPosition(position =>{
      lat = position.coords.latitude+17;
      long = position.coords.longitude;
      props.onGetWeather(lat,long)
    });
  },[])

  if(props.weather.isFetching){
    return(
      <div id='loading'>
        <h1>Loading... {props.weather.error}</h1>
      </div>
    )
  }else{
      return(
        <React.Fragment>
            <React.Fragment>
              <h1>{props.weather.data.timezone}</h1>
              <div className='weatherWrap'>
              <h3>{props.weather.data.currently.temperature}</h3>
              <h5>{props.weather.data.currently.summary}</h5>
              </div>
            </React.Fragment>
        </React.Fragment>
      )
  }
}