@Stoble

Где лучше получать данные для компонента?

Есть компонент HomePage, который содержит компонент, выводящий погоду.
Где лучше получать и обрабатывать данные, в HomePage и передавать данные пропсами компоненту или получать их из стора в конкретном компоненте.

HomePage.jsx

const dispatch = useDispatch();
  const isLoadingToday = useSelector((state) => state.currentWeatherSliceReducer.isLoading);
  const isLoadingAir = useSelector((state) => state.airQualitySliceReducer.isLoading);
  const isLoadingWeekly = useSelector((state) => state.weeklyWeatherSliceReducer.isLoading);
  const location = {lat: '48.864716', lon: '2.349014'}

  useEffect(() => {
    setTimeout(() => {
      dispatch(fetchCurrentWeather(location));
      dispatch(fetchAirQuality(location));
      dispatch(fetchWeeklyWeather(location));
    }, 500);
  }, [])
  
  return (
    <div className={styles.home}>
      <div className={styles.background}></div>
      <div className={styles.wrapper}>
        {isLoadingToday ? (
          <div className={styles.loaderToday}>
            <Loader color='#DAD8F7' size={150}/>
          </div>
          
        ) : (
          <WeatherToday />
        )}
        {isLoadingAir ? (
          <div className={styles.loaderAir}>
            <Loader color='#DAD8F7' size={150}/>
          </div>
          
        ) : (
          <WeatherAir />
        )}
        {isLoadingWeekly ? (
          <div className={styles.loaderWeekly}>
            <Loader color='#DAD8F7' size={150}/>
          </div>
          
        ) : (
          <WeatherByDay />
        )}
        <WeatherTime />
      </div>
    </div>
  )
}
export default HomePage


WeatherToday.jsx

const WeatherToday = () => {
  return (
    <section className={styles.section}>
      <img 
        className={styles.clouds} 
        src='src/assets/HomePage/clouds.svg' 
        alt='clouds'
      />
      <div className={styles.backgroundWrapper}>
        <img 
          className={styles.backgroundImg}
          src='src/assets/HomePage/background.jpg' 
          alt='TodayBackground'
        />
      </div>
      <div className={styles.wrapper}>
        <p className={styles.location}>
          <Icon className={styles.icon} color="#9D99E4" size={30} icon="pin"/>
          Rio do Sul, SC
        </p>
        <div className={styles.temperatureWrapper}>
          <div className={styles.temperature}>
            <span className={styles.temperatureNow}>17</span> °C
          </div>
          <div className={styles.temperatureMinMax}>
            <span>22°</span>
            <span className={styles.temperatureMin}>16°</span>
          </div>
        </div>
        <div className={styles.statisticWrapper}>
          <Statistic name='Wind' icon='wind' value='17' sign='Km/h'/>
          <Statistic name='Humidity' icon='blob' value='32' sign='%'/>
          <Statistic name='Rain' icon='weather' value='10' sign='%'/>
        </div>
      </div>
    </section>
  )
}
export default WeatherToday
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы