Почему два раза вызывается console.log при получение данных из Saga?

Question

[ArtemKalinin2503]

- Есть сервер express который получает данные из Yandex API Weather

- Есть saga которая принимает ответ от сервера с данными:


- Есть компонент в котором происходит вызов action который вызывает данную сагу:


- Action описаны в . reducer


- Но выходит так что сначала приходит пустой state, а только потом второй раз в state приходят данные, в итоге я не могу работать с данными при загрузке страницы, помогите пожалуйста....

Comments

[Модератор]

3. В процессе создания вопроса пользователь Сервиса обязан:

3.8. Использовать для демонстрации фрагментов кода только специальный тег < code>
Размещение фрагментов кода в виде изображений запрещено.

Answer 1

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

1. Метод componentDidMound вызывается после монтирования компонента. Естественно данных во время первого рендера быть не может.
2. Запрос за данными асинхронный, вы не можете знать в какой момент придет ответ. Поэтому хорошим решением будет хранить и использовать ключ состояния загрузки. У вас он присутствует в коде, но не используется(isGettingCityWeather, в моем примере это isFetching)
3. Ключ состояния загрузки при получении данных и ошибке у вас не обновляется. Исправьте.
4. city приходит в виде объекта, но в начальном состоянии у вас массив. Исправьте.

Пример решения:

const initialState = {
  isFetching: false,
  city: {},
  error: null,
};

const weatherReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'GET_WEATHER_REQUEST':
      return {
        ...state,
        isFetching: true,
        error: null,
      };
    case 'GET_WEATHER_SUCCEEDED':
      return {
        ...state,
        isFetching: false,
        city: action.payload,
      };
    case 'GET_WEATHER_FAILED':
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };
    default:
      return state;
  }
}

render() {
  const { isFetching, city, error, getWeather } = this.props;
  
  if (isFetching) return <div>Loading...</div>;

  if (error) return <TryAgain error={error} handler={getWeather} />;
  
  return <div>{city.now_dt}</div>;
}

Comments

[ArtemKalinin2503]

Спасибо огромное за быстрый и развернутый ответ!
Прям очень помог!

[ArtemKalinin2503]

Антон, если не затруднит можешь помочь с написание saga ?
Я внес изменения в код как ты сказал только все равно асинхронность осталась?

export default function* rootWatcher(){
    yield takeLatest("GET_WEATHER_REQUEST", getWeatherWorker); 
};

function* getWeatherWorker(){
    yield put(actionSetIsGettingWeather(true)); 
    const response = yield call(axios.get, "http://localhost:3012/weather");
    if (response.status === 200) {
        console.log('saga if')
        yield put(actionSetIsGettingWeather(false));
        yield put(actionSetWeather(response.data)); //Положим полученные данные в state news       
    } else {
        yield put(actionSetWeatherError("Error!"));
    }
}