Есть компонент 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